# Segmented Control
Capture input for a limited set of options.
```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';
export default function Default() {
return (
Label
Item 1
Item 2
Item 3
);
}
```
## Icons
```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';
import { AlignStartVerticalIcon, AlignCenterVerticalIcon, AlignEndVerticalIcon } from 'lucide-react';
export default function Icons() {
return (
);
}
```
## Orientation
```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';
export default function Orientation() {
return (
Item 1
Item 2
Item 3
);
}
```
## Read Only
```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';
export default function ReadOnly() {
return (
Item 1
Item 2
Item 3
);
}
```
## Disabled
```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';
export default function Disabled() {
return (
Item 1
Item 2
Item 3
);
}
```
## Disabled Item
```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';
export default function DisabledItem() {
return (
Item 1
Item 2
Item 3
);
}
```
## Direction
```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
Label
Item 1
Item 2
Item 3
);
}
```
## API Reference
| Property | Default | Type |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ids | - | Partial\<\{ root: string; label: string; indicator: string; item: (value: string) => string; itemLabel: (value: string) => string; itemControl: (value: string) => string; itemHiddenInput: (value: string) => string; }> \| undefined — The ids of the elements in the radio. Useful for composition. |
| value | - | string \| null \| undefined — The controlled value of the radio group |
| defaultValue | - | string \| null \| undefined — The initial value of the checked radio when rendered.
Use when you don't need to control the value of the radio group. |
| name | - | string \| undefined — The name of the input fields in the radio
(Useful for form submission). |
| form | - | string \| undefined — The associate form of the underlying input. |
| disabled | - | boolean \| undefined — If \`true\`, the radio group will be disabled |
| readOnly | - | boolean \| undefined — Whether the checkbox is read-only |
| onValueChange | - | ((details: ValueChangeDetails) => void) \| undefined — Function called once a radio is checked |
| orientation | - | "horizontal" \| "vertical" \| undefined — Orientation of the radio group |
| dir | "ltr" | "ltr" \| "rtl" \| undefined — The document's text/writing direction. |
| getRootNode | - | (() => ShadowRoot \| Node \| Document) \| undefined — A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| value | - | RadioGroupApi\ |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| children | - | (ratingGroup: RadioGroupApi\) => ReactNode |
| element | - | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| value | - | string |
| disabled | - | boolean \| undefined |
| invalid | - | boolean \| undefined |
| element | - | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined — Render the element yourself |