SegmentedControl

SegmentedControl allows users to select from a set of mutually exclusive options in a horizontal layout.

Examples

Basic Control

A simple segmented control with text labels. Options can be disabled to prevent user interaction.

Item 1

Item 2

Item 3

Control with Icons

Icons can be added as prefix or suffix to enhance the visual representation of options.



Item 1



Item 2





Control with Badges

Badges can be added to show status indicators or counters for additional context.

Item 1

Item 2

10

Item 3

10

Control with Subtext

Subtext provides additional context or description for each option.

Item 1

·

Subtext 1

Item 2

·

Subtext 2

Sizing

SegmentedControl comes in two sizes: medium (default) and large to fit different design needs.

Medium (default)

Option 1

Option 2

Option 3

Large

Option 1

Option 2

Option 3

Props

	Prop	Required	Default	Type
	items	required		SegmentedControlItemConfig[]
	onItemPress	required		(item: SegmentedControlItemConfig) => void
	value	required		string
	size		medium	"medium" | "large"
	style			StyleProp<ViewStyle>
	testID			string