# 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
### SegmentedControlRootProps
| Property | Default | Type | Description |
| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| 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 |
### SegmentedControlRootProviderProps
| Property | Default | Type | Description |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value | - | RadioGroupApi\ | - |
| element? | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |
### SegmentedControlRootContextProps
| Property | Default | Type | Description |
| -------- | ------- | ----------------------------------------------------- | ----------- |
| children | - | (ratingGroup: RadioGroupApi\) => ReactNode | - |
### SegmentedControlLabelProps
| Property | Default | Type | Description |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | - | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |
### SegmentedControlControlProps
| Property | Default | Type | Description |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |
### SegmentedControlIndicatorProps
| Property | Default | Type | Description |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |
### SegmentedControlItemProps
| Property | Default | Type | Description |
| --------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| value | - | string | - |
| disabled? | - | boolean \| undefined | - |
| invalid? | - | boolean \| undefined | - |
| element? | - | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | Render the element yourself |
### SegmentedControlItemTextProps
| Property | Default | Type | Description |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | - | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |
### SegmentedControlItemHiddenInputProps
| Property | Default | Type | Description |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | - | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |