tabler/preview/pages/segmented-control.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import NavSegmented from '@ui/NavSegmented.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import DocsLink from '@ui/DocsLink.astro'
---

<DefaultLayout title="Segmented control" pageMenu="base.segmented-control" description="A segmented control lets users pick one option from a small, always-visible set.">
  <DocsLink slot="page-header-actions" path="/ui/components/segmented-control" />

  <div class="row row-cards">
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Basic</CardTitle>
          <CardSubtitle>A <code>nav-segmented</code> with text <code>nav-link</code> items is enough for a plain control.</CardSubtitle>
          <NavSegmented items={['1', '2', '3', '4']} />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Any content</CardTitle>
          <CardSubtitle>Items can be any short text, including emoji.</CardSubtitle>
          <NavSegmented items={['👦', '👦🏿', '👦🏾', '👦🏽', '👦🏼', '👦🏻']} />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Icons only</CardTitle>
          <CardSubtitle>Put only an icon in each <code>nav-link</code> for an icon-only control.</CardSubtitle>
          <NavSegmented icons={['home', 'star', 'clock', 'ghost', 'bold', 'italic', 'underline']} />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>With icons</CardTitle>
          <CardSubtitle>Combine an icon and text in each <code>nav-link</code> to label each option.</CardSubtitle>
          <NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Vertical</CardTitle>
          <CardSubtitle>Add <code>nav-segmented-vertical</code> to stack the options in a column.</CardSubtitle>
          <NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} vertical />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Vertical with disabled items</CardTitle>
          <CardSubtitle>Add <code>disabled</code> to a <code>nav-link</code> to make that option unselectable.</CardSubtitle>
          <NavSegmented icons={['home', 'star', 'clock', 'ghost', 'bold', 'italic', 'underline']} vertical disabled={[3]} />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Disabled items</CardTitle>
          <CardSubtitle>Disabled options stay visible but can't be selected.</CardSubtitle>
          <NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} disabled={[4, 5]} />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Vertical, no icons</CardTitle>
          <CardSubtitle>A vertical control also works with text-only items.</CardSubtitle>
          <NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} vertical={true} />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Independent group</CardTitle>
          <CardSubtitle>Use radio inputs with a unique <code>name</code> so this control doesn't share selection state with others using the same items.</CardSubtitle>
          <NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} name="checkbox" />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Full width</CardTitle>
          <CardSubtitle>Add <code>w-100</code> to stretch the control across its container.</CardSubtitle>
          <NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} block={true} />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Full width, stacked</CardTitle>
          <CardSubtitle>Multiple full-width controls, one above the other.</CardSubtitle>
          <div class="space-y">
            <div><NavSegmented items={['Overview', 'Analytics', 'Reports', 'Notifications']} block={true} /></div>
            <div><NavSegmented items={['Account', 'Password']} block={true} /></div>
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Sizes</CardTitle>
          <CardSubtitle>Add <code>nav-sm</code> or <code>nav-lg</code> to change the size — with text, icons, or both.</CardSubtitle>
          <div class="space-y">
            <div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} disabled={[3, 5]} size="sm" /></div>
            <div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} disabled={[3, 5]} /></div>
            <div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} disabled={[3, 5]} size="lg" /></div>

            <div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} disabled={[3, 5]} size="sm" /></div>
            <div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} disabled={[3, 5]} /></div>
            <div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} disabled={[3, 5]} size="lg" /></div>

            <div><NavSegmented icons={['list', 'layout', 'calendar', 'files']} disabled={[3, 5]} size="sm" /></div>
            <div><NavSegmented icons={['list', 'layout', 'calendar', 'files']} disabled={[3, 5]} /></div>
            <div><NavSegmented icons={['list', 'layout', 'calendar', 'files']} disabled={[3, 5]} size="lg" /></div>
          </div>
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>