Segmented Control

GitHubStorybook
yarn add @workday/canvas-kit-react
Sources
GitHubStorybook
Install
yarn add @workday/canvas-kit-react

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.

NameTypeDefaultDescription
children*ReactElement<SegmentedControlButtonProps, string | JSXElementConstructor<any>>[]The Button children of the SegmentedControl (must be at least two). TODO: Add support for text children
valuestring | number | undefined0The 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) | undefinedThe 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.
refReact.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