Selection and input

SegmentedControl

Switches between a few views of the same thing.

iOSUISegmentedControl (kara)AndroidMaterial segmented buttonsBrings its own host — renders anywhere

iOSUISegmentedControl (kara)

AndroidMaterial segmented buttons

Import

import {SegmentedControl} from '@hzblj/kara-ui'

Props

A row of mutually exclusive segments, the selected one in the accent — kara's own UISegmentedControl on iOS, Material's single-choice segmented buttons on Android. It needs no Screen or Island: iOS is a plain view, Android brings its own host. It takes the width it is given; the height is the platform's.

Prop	Type	Default	Description
selectedIndex*	number	—	The selected segment. Controlled: pass back what `onChange` reports.
values*	string[]	—	The segments' labels, in order.
disabled	boolean	false	Stops the user changing the segment, and dims the control.
onChange	(index: number, value: string) => void	—	Called with the index and label of the segment the user picked — never for a tap on the one already selected. Android plays `selection`; iOS's control plays its own feedback.
testID	string	—	Test identifier, on the whole control — reach a segment by its label.

selectedIndex*

number

The selected segment. Controlled: pass back what onChange reports.

values*

string[]

The segments' labels, in order.

disabledfalse

boolean

Stops the user changing the segment, and dims the control.

onChange

(index: number, value: string) => void

Called with the index and label of the segment the user picked — never for a tap on the one already selected. Android plays selection; iOS's control plays its own feedback.

testID

string

Test identifier, on the whole control — reach a segment by its label.

Platform notes

The selected segment is in the accent on both platforms — on iOS through kara’s own UISegmentedControl, since neither the system control nor SwiftUI’s segmented picker lets the labels be coloured.
It needs no Screen or Island: iOS is a plain view, Android brings its own host. It takes the width it is given; the height is the platform’s.
onChange fires for a new segment only. Android plays selection; iOS plays the control’s own feedback.