# Tabs: Controlled

> Pass `value` and `onValueChange`. Changes from outside slide the indicator too.

Example: https://hextaui.com/docs/tabs/examples/controlled
Component docs: https://hextaui.com/docs/tabs.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/tabs-controlled.json
```

This adds `components/examples/tabs/controlled.tsx` with the Tabs component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/tabs/controlled.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

const steps = ["Cart", "Shipping", "Payment", "Review"]

export function TabsControlled() {
  const [step, setStep] = React.useState("Cart")
  const index = steps.indexOf(step)

  return (
    <div className="flex flex-col items-start gap-4">
      <Tabs value={step} onValueChange={(value) => setStep(String(value))}>
        <TabsList>
          {steps.map((item) => (
            <TabsTrigger key={item} value={item}>
              {item}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>
      <Button
        size="sm"
        variant="outline"
        onClick={() => setStep(steps[(index + 1) % steps.length])}
      >
        Next step
      </Button>
    </div>
  )
}
```

## Props in this example

### Tabs

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `any` | – |  |
| `onValueChange` | `(value, details) => void` | – |  |

### TabsTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `any` | – |  |

## More Tabs examples

- [Underline](https://hextaui.com/docs/tabs/examples/line.md)
- [Many tabs](https://hextaui.com/docs/tabs/examples/overflow.md)
- [Many tabs, segmented](https://hextaui.com/docs/tabs/examples/overflow-segmented.md)
- [Icons and counts](https://hextaui.com/docs/tabs/examples/icons.md)
- [Vertical](https://hextaui.com/docs/tabs/examples/vertical.md)
- [Disabled](https://hextaui.com/docs/tabs/examples/disabled.md)
- [Right to left](https://hextaui.com/docs/tabs/examples/rtl.md)