Go to AntUIKit homepage

Segmented

One choice out of a short, fixed set, laid out as a single track with a thumb that slides between the options. A radio group that looks like a switch.

Preview in FigmaLLMs

Anotomy

Structure of the segmented control and how its internal parts are composed. Four of the five are also the keys its classNames and styles objects accept. The thumb has no key.
Segmented anatomyKanbanTableCalendar12345
NameDescription
1rootThe track: one <div> that carries the background, the padding, the shape and the size. className and classNames.root land here.
2itemOne option's <label>, wrapping a real <input type="radio">. The selected one carries ant-segmented-item-selected, which an in-[.ant-segmented-item-selected]: variant in a label node can match.
3thumbThe sliding highlight. It has no classNames key, so reach it with [&_.ant-segmented-thumb] and style it alongside the selected item. Its corner radius is the track's minus the track padding.
4iconAn option's glyph. For an icon-only option, leave label unset and put an sr-only word here, since an empty label still adds a gap and pushes the glyph off center.
5labelAn option's content. It takes any node, so counts, Badge dots, Tags and two-line stacks go here. There is no itemRender.
RibbonSelect
© 2026 AntUIKit . All rights reserved.