Segmented
import { Segmented } from '@enmovil/ui-design-system';
A segmented control for switching between a small set of options or views. Without options, it shows Daily, Weekly, Monthly, Quarterly and Yearly.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
options | SegmentedOptions<string> | No | ["Daily", "Weekly", "Monthly", "Quarterly", "Yearly"] | — | Options shown as segments. Defaults to Daily, Weekly, Monthly, Quarterly and Yearly. |
size | string | No | — | 'small', 'middle', 'large' | Size of the control: small, middle or large. Defaults to middle. |
disabled | boolean | No | — | — | Disables every option, so none can be selected. |
placeholder | string | No | — | — | Not a prop of the component: it appears only as a story control and has no effect. |
icon | boolean | No | — | — | Not a prop of the component: it appears only as a story control and has no effect. |
suffixComponent | boolean | No | — | — | Not a prop of the component: it appears only as a story control and has no effect. |
showTime | boolean | No | — | — | Not a prop of the component: it appears only as a story control and has no effect. |
Other attributes
Segmented passes 379 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onFocus | FocusEventHandler<HTMLDivElement> | Fires when an option receives keyboard focus. |
onBlur | FocusEventHandler<HTMLDivElement> | Fires when focus leaves the control. |
onChange | ((value: string) => void) | Fires when a different option is selected. |
Children
Segmented does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.
Loading playground…
Storybook
Open Segmented in Storybook to try every story with the full set of controls.