SegmentedControl

Usage

import { SegmentedControl } from 'nr1'

Examples

Props

ariaLabelstring

Provide a descriptive label for this control, e.g. "Theme selector".

childrenrequirednode

An array of maximum 5 <SegmentedControlItem />s describing the clickable segments in the control. Elements can either have just a label, or a label and an icon, but must be uniform across the children. All elements can have an optional disabled prop to disable that button.

classNamestring

Appends class names to the component.

Should be used only for positioning and spacing purposes.

onChangefunction

Called whenever a <SegmentedControlItem /> is clicked, with that element's value prop. Will also fire if the element currently selected is clicked again. You can use this callback to update the value prop if you want to control its state.

function (event: React.ChangeEvent, 
value: any 
)

spacingTypeenum[]

Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like margin or padding. To omit a value, use SPACING_TYPE.OMIT.

<Array of<One ofSegmentedControl.SPACING_TYPE.EXTRA_LARGE,
SegmentedControl.SPACING_TYPE.LARGE,
SegmentedControl.SPACING_TYPE.MEDIUM,
SegmentedControl.SPACING_TYPE.NONE,
SegmentedControl.SPACING_TYPE.OMIT,
SegmentedControl.SPACING_TYPE.SMALL,
>
>

styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

testIdstring

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

typeenum

DEFAULT

SegmentedControl.TYPE.NORMAL

Set this to SegmentedControl.TYPE.ICONS_ONLY to only show icons.

Will be ignored if icons are not found in the children.

<One ofSegmentedControl.TYPE.ICONS_ONLY,
SegmentedControl.TYPE.NORMAL,
>

valueany

Set the currently-selected option in the control by updating this prop.