Segmented Control

Switches between a few mutually exclusive views or modes.

Configurations

Supported configurations for this component.

5 examples

Live

Labels

Icons

Icon and label

Last selected

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
valuereq	`string`	-	Unique value that identifies this segment.
label	`string`	-	Text shown on the segment.
icon	`React.ComponentType<{ size?: number, weight?: string }>`	-	Icon component rendered in the segment, optionally alongside its label.
ariaLabel	`string`	-	Accessible name for the segment, falling back to label when omitted.

Prop	Type	Default	Description
valuereq	`string`	-	Value of the currently selected segment.
onChangereq	`(next: string) => void`	-	Handler called with the value of the newly selected segment.
optionsreq	`SegmentOption[]`	-	Segments to render, in display order.
ariaLabelreq	`string`	-	Accessible name for the tablist; required when no surrounding label names the control.
size	`'sm'\|'md'\|'lg'`	'md'	Height and icon-size preset for the control.
layoutGroupId	`string`	-	Override the auto-generated per-instance id only when you explicitly want two SegmentedControls to share their indicator (animating across both as one unit). The default `useId()` value scopes the indicator to a single control, which is what you want 99% of the time, without it, switching selections in one control makes the indicator fly between controls.
className	`string`	-	Extra classes merged onto the root element.
style	`React.CSSProperties`	-	Inline styles merged onto the root element.

Displays a status message in the flow of the page, at a severity from note to fault.

Represents a person as a square image tile that falls back to their initials.

Displays the state a row or cell reports, such as online, queued, or fault.