zidanecomponents/Segmented
import { … } from 'zidane-ui'ui/src/components/Segmented.tsx
Components#
SegmentedComponent#
Renders a track of mutually exclusive choices; the chosen one is the raised chip. It is a radio group with one tab stop on the checked item. Arrow keys, Home and End move the selection to the next enabled option.
function Segmented<T extends string>(props: SegmentedProps<T>): ElementType parameters
| Name | Type | Description |
|---|---|---|
| T | extends string |
Parameters
| Name | Type | Description |
|---|---|---|
| props | SegmentedProps<T> | Component props. |
Returns
ElementProps
| Name | Type | Default | Description |
|---|---|---|---|
| ariaLabel? | string | Accessible name of the radio group. | |
| className? | string | Extra classes on the track. | |
| onChange | (v: T) => void | Called with the new value when an option is picked by click or keyboard. | |
| options | readonly SegmentedOption<T>[] | The choices, in order. | |
| size? | 'sm' | 'md' | 'md' | Item height: |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. | |
| value | T | The value of the selected option. |
Interfaces#
SegmentedOptionInterface#
One choice of a Segmented control.
interface SegmentedOption<T extends string>Type parameters
| Name | Type | Description |
|---|---|---|
| T | extends string |
Properties
| Name | Type | Description |
|---|---|---|
| disabled? | boolean | Grey the item out and skip it in keyboard navigation. |
| icon? | string | Icon class shown before the label. |
| label | ReactNode | Content of the item. |
| title? | string | Native tooltip of the item. |
| tooltip? | ReactNode | The kit's tooltip under the item, for a choice that needs a sentence. Replaces |
| value | T | The value reported to |
SegmentedPropsInterface#
Props for Segmented.
interface SegmentedProps<T extends string>Type parameters
| Name | Type | Description |
|---|---|---|
| T | extends string |
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| ariaLabel? | string | Accessible name of the radio group. | |
| className? | string | Extra classes on the track. | |
| onChange | (v: T) => void | Called with the new value when an option is picked by click or keyboard. | |
| options | readonly SegmentedOption<T>[] | The choices, in order. | |
| size? | 'sm' | 'md' | 'md' | Item height: |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. | |
| value | T | The value of the selected option. |