Segmented Control Picks one of two to five short options, as joined buttons.
The snippet an agent gets usage.tsx rules.md prompt.md
import { SegmentedControl } from '@basiiik/ui'; <SegmentedControl options={[{ value: 'list', label: 'List' }, { value: 'board', label: 'Board' }]} aria-label="View" /> From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it ships.
Example values were filled in for the required props options, aria-label: replace them with your own. Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false). Hover is CSS; Focused is :focus-visible on the native radio, drawn on its label; Disabled uses the disabled prop (all options) or an option's disabled; the chosen option follows value or defaultValue. Storybook: Inputs/Segmented control.
Install npm install @basiiik/ui import { SegmentedControl } from '@basiiik/ui'; Props Prop Type Default size"sm" | "md""md"disabledboolean–optionsSegmentedControlOption[]Requiredvaluestring–defaultValuestring–onValueChange(value: string) => void–aria-labelstring–aria-labelledbystring–fullWidthboolean–namestring–
Native attributes such as className, id and data-* go to the root element.
States. Hover is CSS; Focused is :focus-visible on the native radio, drawn on its label; Disabled uses the disabled prop (all options) or an option's disabled; the chosen option follows value or defaultValue.
Accessibility Tab moves into the group, onto the chosen option (one Tab stop) Left and Right (or Up and Down) move and choose Disabled options are skipped A named radiogroup: pass aria-label or aria-labelledby Each option is a native radio, so its checked state is announced Icon-only options need their own aria-label Use it when Switching between two to five views of the same thing: List and Board A short exclusive choice that applies at once: Day, Week, Month Do not use it when Panels of different content (use Tabs) More than five options or long labels (use Select or Radio) Several options at once (use Chip Group) An on and off setting (use Switch) Rules for agents Pass options as { value, label }; keep labels to one or two words Name the group with aria-label (or aria-labelledby pointing at a visible label) The change applies at once: no Save button after it Use fullWidth in narrow panels so the options share the width Avoid Using it as Tabs to switch panels Six or more options squeezed in Options of very different label lengths that make the control lopsided A Segmented Control for a yes or no question (use Switch or Radio) Colour tokens it reads color.bg.mutedcolor.bg.surfacecolor.text.disabledcolor.text.primarycolor.text.secondary
Related 