# Segmented Control Capture input for a limited set of options. ```svelte Label Item 1 Item 2 Item 3 ``` ## Icons ```svelte ``` ## Orientation ```svelte Item 1 Item 2 Item 3 ``` ## Read Only ```svelte Item 1 Item 2 Item 3 ``` ## Disabled ```svelte Item 1 Item 2 Item 3 ``` ## Disabled Item ```svelte Item 1 Item 2 Item 3 ``` ## Direction ```svelte 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 | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself | | value | - | () => RadioGroupApi\ | | element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself | | children | - | Snippet\<\[() => RadioGroupApi\]> | | element | - | Snippet\<\[HTMLAttributes\<"span">]> \| undefined — Render the element yourself | | element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself | | element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself | | value | - | string | | disabled | - | boolean \| undefined | | invalid | - | boolean \| undefined | | element | - | Snippet\<\[HTMLAttributes\<"label">]> \| undefined — Render the element yourself | | element | - | Snippet\<\[HTMLAttributes\<"span">]> \| undefined — Render the element yourself | | element | - | Snippet\<\[HTMLAttributes\<"input">]> \| undefined — Render the element yourself |