DEVELOPER REFERENCE · v4.0.0

Tabs API

Props, callbacks and methods. Select an underlined type to explore its fields, allowed values and callback arguments.

Tabs14 props1 callbacks0 methods

Props14

Tabs props
Name	Type	Description
`value`Required	`T`Inspect type	Value to display or edit. The declared type identifies the supported representation; change callbacks describe how edited values are emitted.
`options`Required	`SegmentedSwitchOption<T>[]`Inspect type	Available choices or control configuration, according to the declared type; expand it to inspect each field.
`ariaLabel`Optional	`string \| undefined`	Accessible name announced by assistive technology.
`className`Optional	`string \| undefined`	Additional CSS classes applied to the component root.
`itemClassName`Optional	`string \| undefined`	Additional CSS classes for the item part of the component.
`countClassName`Optional	`string \| undefined`	Additional CSS classes for the count part of the component.
`activeClassName`Optional	`string \| undefined`	Additional CSS classes for the active part of the component.
`disabled`Optional	`boolean \| undefined`	Disables user interaction with the control.
`iconOnly`Optional	`boolean \| undefined`	Compact icon layout. Supply icons through renderOption and text through option labels.
`title`Optional	`string \| undefined`	Heading or title text used by this component.
`role`Optional	`SegmentedSwitchRole \| undefined`Inspect type	Accessibility role used by the rendered element.
`testId`Optional	`string \| undefined`	Stable data attribute for locating the control in automated tests.
`renderOption`Optional	`((option: SegmentedSwitchOption<T>, state: { active: boolean; disabled: boolean; }) => SegmentedSwitchRenderable) \| undefined`Inspect type	Custom renderer for an option and its current selection/disabled state.
`renderCount`Optional	`((option: SegmentedSwitchOption<T>, state: { active: boolean; disabled: boolean; }) => SegmentedSwitchRenderable) \| undefined`Inspect type	Custom renderer for the count shown beside a segmented option.

Events and callbacks1

Tabs events and callbacks
Name	Type	Description
`onChange`Required	`(value: T, option: SegmentedSwitchOption<T>) => void`Inspect type	Receives the new value when the user changes the control. Update the corresponding value prop for controlled use.

Methods0

No component-specific imperative methods. Use props and callbacks to control this component.