8.6 Released with 🥽 visionOS support and more!
Check it out

<SegmentedBar> is a UI bar component that displays a set of buttons for discrete selection.

xml
<SegmentedBar>
  <SegmentedBarItem title="First" />
  <SegmentedBarItem title="Second" />
  <SegmentedBarItem title="Third" />
</SegmentedBar>

Props ​

items ​

ts
items: SegmentedBarItem[]

An array of items to be displayed in the SegmentedBar.

selectedIndex ​

ts
selectedIndex: number

Gets or sets the index of the selected item.

selectedBackgroundColor ​

ts
selectedBackgroundColor: Color

Gets or sets the background color of the selected item.

To set the background color of the entire bar, use backgroundColor.

See Color.

...Inherited ​

For additional inherited properties, refer to the API Reference.

SegmentedBarItem Props ​

title ​

ts
title: string

Gets or sets the title of the SegmentedBarItem.

Events ​

selectedIndexChanged ​

ts
on('selectedIndexChanged', (args: EventData) => {
  const segmentedBar = args.object as SegmentedBar
  console.log('SegmentedBar index changed to:', segmentedBar.selectedIndex)
})

Emitted when an item in the SegmentedBar is tapped.

Native component ​

Previous
SearchBar