/ux
Components/Buttons/SegmentedControl

SegmentedControl

Buttons

Horizontal pill-group for switching between 2–5 views.

Tab-strip style control for mutually exclusive options. An animated 1px Neo Green line slides to follow the active item. Supports horizontal and vertical orientations and keyboard navigation.

Usage

import { SegmentedControl } from "nosible-ux"

export default function Example() {
  return (
    <SegmentedControl
      data={["1D", "7D", "30D", "90D", "YTD"]}
      defaultValue="7D"
    />
  )
}

Examples

Time range picker

Vertical orientation

Accessibility

Arrow keys move focus between items; Space/Enter selects. role="radiogroup" with role="radio" items. Active item has aria-checked="true".

Props

Name TypeDefaultDescription
data
(string | SegmentedItem)[]—List of items. Each item is either a plain string (used as both value and label) or an object with value, label, and optional disabled fields.
defaultValue
string | undefined—Uncontrolled default selected value. Defaults to the first item's value.
disabled
boolean | undefinedfalseDisables all items when true.
fullWidth
boolean | undefinedfalseMakes the control expand to fill its container.
onChange
((value: string) => void) | undefined—Fired when the user selects a different item.
orientation
"horizontal" | "vertical" | undefined"horizontal"Stack direction.
size
"sm" | "md" | "lg" | undefined"md"Item size preset.
value
string | undefined—Controlled selected value.
← All ComponentsGetting Started →