Navigation

SegmentedControl

A segmented control (tab-like switcher) for choosing one option from a small set. Ideal for mode switching (e.g., New Patient vs Search Patient), view toggles, or mutually exclusive choices in healthcare forms and workflows.

Basic usage

Use for mode switching. Label is visible by default; segments announce selection to screen readers.

Patient entry mode

With icons

Optional icons per segment. Icons are decorative (aria-hidden); ensure labels are sufficient for accessibility.

Patient entry mode

Full width

Stretch segments to fill the container. Useful in modals or narrow columns.

View

Sizes

Size variants for different contexts. Touch targets meet minimum 24px for sm and above.

Small

Medium (default)

Large

Hidden label (e.g. in forms)

Use hideLabel when the control is in a form and the context is clear. The label is still used for aria-label so screen readers get the same context.

Excluded from tab order

Use includeInTabOrder=false in form flows so focus goes to the first form field instead of the control (e.g. eligibility check modal). Users can still click to change mode.

Patient entry mode

Segments have tabindex="-1". Tab from here skips to the next focusable element.

Disabled

Disable the entire control or individual segments.

Patient entry mode (all disabled)

Patient entry mode (one disabled)

Props

Prop	Type	Default	Description
`id`	`string`	—	Unique identifier for the control
`label`	`string`	—	Accessible label for the group (required)
`options`	`SegmentedControlOption[]`	—	Segment options (required)
`value`	`string`	—	Currently selected value
`disabled`	`boolean`	false	Whether the entire control is disabled
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Size variant
`fullWidth`	`boolean`	false	Stretch segments to fill width
`hideLabel`	`boolean`	false	Hide label visually (still used for aria-label)
`includeInTabOrder`	`boolean`	true	When false, segments get tabindex=-1 (e.g. form flows)
`class`	`string`	—	Additional CSS classes
`onchange`	`(value: string) => void`	—	Change handler
`testId`	`string`	—	Test ID for e2e testing

Healthcare & accessibility

• Use for mode switching (New Patient / Search Patient) or view toggles; keep 2–4 segments.
• Each segment is a button with aria-pressed; group uses role="group" and aria-label.
• Tab enters at first/last button; Enter/Space activates. No arrow-key navigation (per segmented-control best practice).
• Use includeInTabOrder=false in forms so focus goes to inputs first; users can still click to change mode.
• Light/dark theme and reduced motion are handled via design tokens and prefers-reduced-motion.
• Minimum touch target 24×24px (sm and up); text contrast follows WCAG AA.