• /
  • Log in
  • Start now

SegmentedControl

A component which displays a set of buttons, only one of which can be active at a time. Can be used in 'controlled mode' (by setting the value prop) or uncontrolled.

Usage

import { SegmentedControl } from 'nr1'

Examples

Basic

ReferenceError: SegmentedControl is not defined

With some hints

ReferenceError: SegmentedControl is not defined

Controlled

With icons

Icons only with some hints

Props

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.MouseEvent<HTMLButtonElement>,
value: any
) => undefined
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 of
SegmentedControl.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.

Used to target the component in unit and e2e testing.

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 of
SegmentedControl.TYPE.ICONS_ONLY,
SegmentedControl.TYPE.NORMAL,
>
valueany

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

Methods

SegmentedControl.render

function () => undefined
Edit this pageCreate an issue
Copyright © 2021 New Relic Inc.

This site uses cookies 🍪

We use cookies and other similar technologies ("Cookies") on our websites and services to enhance your experience and to provide you with relevant content. By using our websites and services you are agreeing to the use of cookies. You can read more here. If you consent to our cookies, please click Yes.