SegmentedControl · ui.voila.dev

<SegmentedControl.Root defaultValue="week">
	<SegmentedControl.Item value="day">Day</SegmentedControl.Item>
	<SegmentedControl.Item value="week">Week</SegmentedControl.Item>
	<SegmentedControl.Item value="month">Month</SegmentedControl.Item>
</SegmentedControl.Root>

Always exactly one selected, so it suits a view switcher rather than a filter. Keep it to a handful of short labels — the segments share the width evenly.

API

SegmentedControl.Root

Prop	Type	Default
`size`	`"default" \| "lg" \| "sm"`	`"default"`	Control height and label size. Match it to the controls beside it.
`className`	`string` \| `((state: RadioGroupState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`defaultValue`	`any`	—	The uncontrolled value of the radio button that should be initially selected. To render a controlled radio group, use the `value` prop instead.
`disabled`	`boolean`	—	Whether the component should ignore user interaction.
`form`	`string`	—	Identifies the form that owns the radio inputs. Useful when the radio group is rendered outside the form.
`inputRef`	`Ref<HTMLInputElement>`	—	A ref to access the hidden input element.
`name`	`string`	—	Identifies the field when a form is submitted.
`onValueChange`	`((value: any, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element \| undefined; }) => void)`	—	Callback fired when the value changes.
`readOnly`	`boolean`	—	Whether the user should be unable to select a different radio button in the group.
`render`	`ComponentRenderFn<HTMLProps, RadioGroupState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`required`	`boolean`	—	Whether the user must choose a value before submitting a form.
`style`	`CSSProperties` \| `((state: RadioGroupState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.
`value`	`any`	—	The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead.

Plus the DOM props of the element it renders. Source: segmented-control/components/segmented-control-root.tsx.

SegmentedControl.Item

Prop	Type	Default
`value`	`any`	required	The unique identifying value of the radio in a group.
`className`	`string` \| `((state: RadioRootState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`disabled`	`boolean`	—	Whether the component should ignore user interaction.
`inputRef`	`Ref<HTMLInputElement>`	—	A ref to access the hidden input element.
`nativeButton`	`boolean`	—	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
`readOnly`	`boolean`	—	Whether the user should be unable to select the radio button.
`render`	`ComponentRenderFn<HTMLProps, RadioRootState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`required`	`boolean`	—	Whether the user must choose a value before submitting a form.
`style`	`CSSProperties` \| `((state: RadioRootState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: segmented-control/components/segmented-control-item.tsx.