# Tabs

Source: https://iriscss.com/documentation/components/tabs/

`details` elements that share a `name`, laid out as tabs. No JavaScript.

Wrap the `details` in `.tabs` and give them the same `name`, so only one opens at a time. The summaries become the tab row. Browsers without `::details-content` show an [accordion](https://iriscss.com/documentation/components/accordion/index.html.md) instead. The open tab ignores clicks, but `Enter` or `Space` on it still closes it, since only a script can stop that.

```html
<div class="tabs">
  <details name="plan" open>
    <summary>Monthly</summary>
    <p>$12 a month, cancel any time.</p>
  </details>
  <details name="plan">
    <summary>Yearly</summary>
    <p>$120 a year, two months free.</p>
  </details>
  <details name="plan">
    <summary>Lifetime</summary>
    <p>Pay once, use it forever.</p>
  </details>
</div>
```

## Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) on `.tabs` colors the line under the open tab.

```html
<div class="tabs accent">
  <details name="code" open>
    <summary>HTML</summary>
    <p>Write the markup.</p>
  </details>
  <details name="code">
    <summary>CSS</summary>
    <p>Override a variable.</p>
  </details>
</div>
```

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-tabs-indicator-width` | `0.125rem` | Underline of the open tab |