SegmentedControlA segmented control is a linear set of two or more segments.Segmented control is often used to display and switch between different views.

Overview

Usage Examples

Style

Property	Preview
Default Best suitable as a main feature of the screen, mainly used for filtering or changing views within a screen.
Form Suitable for form or settings screens, matches with other related components such as textField, Picker and others. preset="form"

Layout

Property	Preview
Full width The component stretches to the width of the screen.
Hug content The components stretches according to the width of the labels.

Segments AmountSegmented Control has at least 2, and up to 4 values. a single value always have to be selected.

Content OptionsSegmented Control has at least 2, and up to 4 values. a single value always have to be selected.

Spec

Default style

Form style

UX Guidelines

Accessory LabelText label is optional and can be enabled when required, yet not recommended in this style.

Dev

PlaygroundCode Example

APIThis is the list of additional props for the component

activeBackgroundColor

string

The background color of the active segment

activeColor

string

The color of the active segment label

backgroundColor

string

The background color of the inactive segments

borderRadius

number

The segmentedControl borderRadius

containerStyle

ViewStyle

Additional spacing styles for the container

iconOnRight

boolean

Should the icon be on right of the label

initialIndex

number

Initial index to be active

label

string

SegmentedControl label

labelProps

TextProps

Pass props for the SegmentedControl label

onChangeIndex

(index: number) => void

Callback for when index has change.

outlineColor

string

The color of the active segment outline

outlineWidth

number

The width of the active segment outline

preset

SegmentedControlPreset

Preset of the SegmentedControl [default, form]

segmentLabelStyle

TextStyle

Segment label style

segments

SegmentedControlItemProps

Array on segments

segmentsStyle

ViewStyle

Additional style for the segments

style

ViewStyle

Custom style to inner container

testID

string

Component test id

throttleTime

number

Trailing throttle time of changing index in ms.