Controlled and Uncontrolled Modes

Updated on Apr 23, 2026

The SegmentedControl supports both controlled and uncontrolled usage:

• In controlled mode, the selected value is managed externally via the value prop and updated through the change event.
• In uncontrolled mode, the initial selection is set with defaultValue and the component manages its own state internally.

Controlled SegmentedControl

The following demo shows how to manage the selected value externally via the value prop and the change event, enabling full control over the SegmentedControl state:

Change Theme

Theme

Loading ...

SegmentedControl with Default Value

The following demo shows how to set an initial selection using the defaultValue prop, allowing the component to manage its own state internally without requiring external state management:

Change Theme

Theme

Loading ...

Suggested Links

• SegmentedControl Overview
• Appearance
• Customization
• API Reference of the SegmentedControl