A segmented control is a linear set of two or more options with one segment selected at a time. A segmented control allows users to input, filter, change the presentation, or browse content in a view.

Figma

The Segment Control component allows users to switch between multiple options and provides an animated selection indicator.

1. Reference

This component inherits props from the Segmented Control.

Prop

Type

Default

count

state

default

selected

disabled

default

2. Count

You can edit the count with the 2, 3 or 4 parameter.

Image 2.1 : Count 2

Image 2.2 : Count 3

Image 2.3 : Count 4

3. State

You can edit the state with the default, selected or disabled parameter.

Image 3.1 : State default

Image 3.1 : State disabled

Jatpack Compose

The SegmentControl component allows users to switch between multiple options and provides an animated selection indicator.

1. Reference

This component inherits props from the Segmented Control.

Prop

Type

Default

items

label

onClick

2. Items

You can edit the items with the label parameter.

Label-1
Label-2
SegmentControl(
selectedIndex=selectedItemDouble,
items = {
item(
label = "Label-1",
onClick = {
selectedItemDouble = 0
}
)
item(
label = "Label-2",
onClick = {
selectedItemDouble = 1
}
)
})

3. State

You can edit the state with the SegmentedControlState.default or SegmentedControlState.disabled parameter.

Label-1
Label-2
SegmentControl(
selectedIndex=selectedItemDouble,
items = {
item(
label = "Label-1",
onClick = {
selectedItemDouble = 0
}
)
item(
label = "Label-2",
state = SegmentedControlState.disabled,
onClick = {
selectedItemDouble = 1
}
)
})

Preview

Code

Label-1

Label-2

DlSegmentedControl(
  tabs: const [
    DlSegmentedControlTab(
      label: 'Label-1'
    ),
    DlSegmentedControlTab(
      label: 'Label-2'
    ),
  ],
)

Copy

Usage

Add this code example to your project to see how the component works.

DlSegmentedControl(
  tabs: const [
    DlSegmentedControlTab(
      label: 'Label',
      badge: DlBadge(size: DlBadgeSize.sm),
    ),
    DlSegmentedControlTab(
      label: 'Label'
    ),
  ],
)

Copy

API Reference

DlSegmentedControl is a rounded-full segmented switch built from configurable tab items.

DlSegmentedControl

Prop

Type

Default

tabs

List<DlSegmentedControlTab>

onTabChanged

ValueChanged<int>?

null

key

Key?

null

DlSegmentedControlTab

Prop

Type

Default

label

String

badge

Widget?

null

state

defaultState

disabled

defaultState

Examples

Disabled

Preview

Code

Label-1

Label-2

DlSegmentedControl(
  tabs: const [
    DlSegmentedControlTab(
      label: 'Label-1'
    ),
    DlSegmentedControlTab(
      label: 'Label-2',
      state: DlSegmentedControlTabState.disabled,
    ),
  ],
)

Copy

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version