SegmentedItemProps

Updated on Apr 23, 2026

Represents the properties of a single item within the SegmentedControl component.

Name	Type	Default	Description
aria-label?	string		The aria-label HTML attribute of the item button.
dir?	string		Represents the dir HTML attribute of the item button, controlling text directionality.
disabled?	boolean		Specifies whether the item is disabled.
iconClassName?	string		CSS class name applied to the icon element only when the item is selected. Has no effect when itemTemplate is provided. vue <SegmentedControl :items="[{ value: 'opt1', text: 'Bold', svgIcon: boldIcon, iconClassName: 'active-icon' }]" />
onBlur?	(e: FocusEvent) => void		Event handler fired when the item button loses focus.
onClick?	(e: MouseEvent) => void		Event handler fired when the item button is clicked.
onFocus?	(e: FocusEvent) => void		Event handler fired when the item button receives focus.
onMouseEnter?	(e: MouseEvent) => void		Event handler fired when the mouse pointer enters the item button.
onMouseLeave?	(e: MouseEvent) => void		Event handler fired when the mouse pointer leaves the item button.
svgIcon?	SVGIcon		Sets an SVG icon to render inside the item using an Icon element. Only rendered when itemTemplate is not provided. vue <SegmentedControl :items="[{ value: 'opt1', text: 'Bold', svgIcon: boldIcon }]" />
text?	string		Specifies the text label of the SegmentedItem. Rendered inside a <span> element. Only rendered when itemTemplate is not provided. vue <SegmentedControl :items="[{ value: 'opt1', text: 'Option 1' }]" />
title?	string		Sets the title HTML attribute of the item button. vue <SegmentedControl :items="[{ value: 'opt1', title: 'Option 1 tooltip' }]" />
type?	"button" | "reset" | "submit"	"button"	Specifies the type HTML attribute of the item button.
value	string		The unique identifier for the SegmentedItem. Used to match against the SegmentedControl's value to determine selection. vue <SegmentedControl :items="[{ value: 'option1', text: 'Option 1' }]" />