Segment Group

Organizes and navigates between sections in a view.

Anatomy

To set up the segmented control correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the SegmentGroup component in your project. Let’s take a look at the most basic example:

Initial Value

To set a default segment on initial render, use the defaultValue prop:

Controlled Segment Group

To create a controlled SegmentGroup component, manage the current selected segment using the value prop and update it when the onValueChange event handler is called:

Disabled Segment

To disable a segment, simply pass the disabled prop to the SegmentGroup.Item component:

API Reference

Item

PropTypeDefault
value
string
asChild
boolean
disabled
boolean
invalid
boolean

Root

PropTypeDefault
asChild
boolean
defaultValue
string
dir
'ltr' | 'rtl'"ltr"
disabled
boolean
form
string
getRootNode
() => ShadowRoot | Node | Document
id
string
ids
Partial<{ root: string label: string indicator: string item(value: string): string itemLabel(value: string): string itemControl(value: string): string itemHiddenInput(value: string): string }>
name
string
onValueChange
(details: ValueChangeDetails) => void
orientation
'horizontal' | 'vertical'
value
string

Label

PropTypeDefault
asChild
boolean

ItemText

PropTypeDefault
asChild
boolean

Indicator

PropTypeDefault
asChild
boolean

ItemControl

PropTypeDefault
asChild
boolean