# Segmented Control
Compact multi-option selector with animated active segment.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { SegmentedControl } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/segmented-control
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=segmented-control--default&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="132" title="Segmented Control component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
<SegmentedControl
  value={value}
  onChange={setValue}
  options={[
    { value: "a", label: "A" },
    { value: "b", label: "B" },
  ]}
/>
```

## Props

<PropsTable
  props={[
  {
    name: "value",
    type: "string",
    required: true,
    description: "The currently selected value.",
  },
  {
    name: "options",
    type: "{ value: string; label: string }[]",
    required: true,
    description: "Array of options to display.",
  },
  {
    name: "onChange",
    type: "(value: string) => void",
    required: true,
    description: "Callback fired when the value changes.",
  },
  {
    name: "disabled",
    type: "boolean",
    description: "Whether the control is disabled.",
  },
  {
    name: "variant",
    type: '"default" | "outline"',
    default: '"default"',
    description: "The visual variant of the segmented control.",
  },
  {
    name: "size",
    type: '"sm" | "default"',
    default: '"default"',
    description: "The size of the segmented control.",
  },
]}
/>