Segmented Control
Usage Guidance
Coming soon!
Examples
Basic Example
Here is a basic example of a Segmented Control with multiple nested Buttons. Note: while
managing state using a unique value for each Button child is encouraged, you can also use
indexes and omit the value field. It is strongly recommended to not mix these two methods.
Props
Undocumented props are spread to the underlying container <div> element.
| Name | Type | Default | Description |
|---|---|---|---|
children* | ReactElement<SegmentedControlButtonProps, string | JSXElementConstructor<any>>[] | The Button children of the SegmentedControl (must be at least two). TODO: Add support for text children | |
value | string | number | undefined | 0 | The value or index of the Button that the SegmentedControl should be toggled on to. If a string is provided, the Button with the corresponding value will be selected. If a number is provided, the Button with the corresponding index will be selected. |
onChange | ((value: string | number) => void) | undefined | The function called when a button in the SegmentedControl is toggled. If the selected button has a value, that value will be passed to the callback function; otherwise, the index of the button will be passed. | |
ref | React.Ref<any> | Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`). | |
as | "symbol" | "object" | "small" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 156 more ... | React.ComponentType<any> | Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef` and spread extra props to a root element. |
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.
FAQ Section