Tangible Design System · @tangible/ui 0.2.29 · Interactive version · Markdown

SegmentedControl

import { SegmentedControl } from '@tangible/ui';

Interactive docs and examples: SegmentedControl in Storybook.

SegmentedControl props

Prop Type Default Description
children ReactNode
aria-label? string Accessible label for the radiogroup. At least one of aria-label or aria-labelledby is required.
aria-labelledby? string ID of element that labels this control. At least one of aria-label or aria-labelledby is required.
className? string Additional classes
defaultValue? SegmentedControlValue Uncontrolled initial value
disabled? boolean false Disable all items
loop? boolean true Whether arrow keys wrap around
onValueChange? (value: SegmentedControlValue) => void Callback when selection changes
orientation? "horizontal" | "vertical" 'horizontal' Layout direction
size? "lg" | "md" | "sm" | "xs" 'md' Size scale
value? SegmentedControlValue Controlled selected value
variant? "outline" | "pill" | "underline" 'pill' Visual style
wrap? boolean false Allow items to wrap to multiple lines (default: false)

SegmentedControl.Item

Prop Type Default Description
value SegmentedControlValue Unique identifier (required)
aria-label? string Accessible label — required for icon-only items
aria-labelledby? string Accessible name by reference. Modelled explicitly, like aria-label above and like the group root already does — otherwise it rides ...rest and its ordering relative to the group's own attributes is incidental. Forwarding is deliberate: it is a legitimate way to name an item from visible text elsewhere. It does OUTRANK the item's own label (AccName 2A), and an id that resolves to nothing empties the name entirely (step 2B) — so point it at an element that exists.
children? ReactNode Label content
className? string Additional classes
disabled? boolean false Disable this item
icon? ReactNode Icon element rendered before the label.

Also accepts the standard attributes of ButtonHTMLAttributes (data-*, aria-*, event handlers), passed to the element it renders.

Examples

Stories: Playground, Variants, Sizes, With Icons, Reaction Filter, Vertical, Disabled States, Controlled, No Loop, Keyboard Navigation, Wrapping, Underline Indicator Override (interactive page).

Component API tokens

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.