# SegmentedControl

A pill-shaped selection control. Like a Radio Group, but with better posture and a satisfying slide animation.

## Notes

- Use SegmentedControl for switching between views or modes within a single context.
- The background thumb slides smoothly between options with a spring animation.
- Perfect for compact toggles where a full Tab set is too much.

## Properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| name (required) | `string` | - | The name of the radio group. |
| options (required) | `Option[]` | - | The list of options. |
| defaultValue | `string` | - | The initially selected value. |
| class | `string` | - | Additional CSS classes. |

## Example

```astro
<SegmentedControl name="view" options={[{label: "List", value: "list"}, {label: "Grid", value: "grid"}]} defaultValue="grid" />
```