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

<SegmentedControl onChange={(evt, value) => console.log(evt, value)}>
  <SegmentedControlItem value="one" label="One" />
  <SegmentedControlItem value="two" label="Two" />
  <SegmentedControlItem disabled value="three" label="Three" />
  <SegmentedControlItem value="four" label="Four" />
</SegmentedControl>;

1
<SegmentedControl onChange={(evt, value) => console.log(evt, value)}>
2
  <SegmentedControlItem value="one" label="One" />
3
  <SegmentedControlItem value="two" label="Two" />
4
  <SegmentedControlItem disabled value="three" label="Three" />
5
  <SegmentedControlItem value="four" label="Four" />
6
</SegmentedControl>;

ReferenceError: SegmentedControl is not defined

With some hints

<SegmentedControl onChange={(evt, value) => console.log(evt, value)}>
  <SegmentedControlItem value="one" label="One" />
  <SegmentedControlItem value="two" label="Two" />
  <SegmentedControlItem
    hint="The third item"
    disabled
    value="three"
    label="Three"
  />
  <SegmentedControlItem hint="The fourth item" value="four" label="Four" />
</SegmentedControl>;

1
<SegmentedControl onChange={(evt, value) => console.log(evt, value)}>
2
  <SegmentedControlItem value="one" label="One" />
3
  <SegmentedControlItem value="two" label="Two" />
4
  <SegmentedControlItem
5
    hint="The third item"
6
    disabled
7
    value="three"
8
    label="Three"
9
  />
10
  <SegmentedControlItem hint="The fourth item" value="four" label="Four" />
11
</SegmentedControl>;

ReferenceError: SegmentedControl is not defined

Controlled

class TestComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: 'one',
    };
  }

  render() {
    return (
      <SegmentedControl
        value={this.state.value}
        onChange={(evt, value) => this.setState({ value })}
      >
        <SegmentedControlItem value="one" label="One" />
        <SegmentedControlItem value="two" label="Two" />
        <SegmentedControlItem disabled value="three" label="Three" />
        <SegmentedControlItem value="four" label="Four" />
      </SegmentedControl>
    );
  }
}

1
class TestComponent extends React.Component {
2
  constructor(props) {
3
    super(props);
4
5
    this.state = {
6
      value: 'one',
7
    };
8
  }
9
10
  render() {
11
    return (
12
      <SegmentedControl
13
        value={this.state.value}
14
        onChange={(evt, value) => this.setState({ value })}
15
      >
16
        <SegmentedControlItem value="one" label="One" />
17
        <SegmentedControlItem value="two" label="Two" />
18
        <SegmentedControlItem disabled value="three" label="Three" />
19
        <SegmentedControlItem value="four" label="Four" />
20
      </SegmentedControl>
21
    );
22
  }
23
}

With icons

class TestComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: 'one',
    };
  }

  render() {
    return (
      <SegmentedControl
        value={this.state.value}
        onChange={(evt, value) => this.setState({ value })}
      >
        <SegmentedControlItem
          label="One"
          value="one"
          iconType={
            SegmentedControlItem.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CODE
          }
        />
        <SegmentedControlItem
          label="Two"
          value="two"
          iconType={
            SegmentedControlItem.ICON_TYPE.INTERFACE__OPERATIONS__FILTER
          }
        />
        <SegmentedControlItem
          label="Three"
          value="three"
          iconType={SegmentedControlItem.ICON_TYPE.INTERFACE__SIGN__NUMBER}
        />
      </SegmentedControl>
    );
  }
}

1
class TestComponent extends React.Component {
2
  constructor(props) {
3
    super(props);
4
5
    this.state = {
6
      value: 'one',
7
    };
8
  }
9
10
  render() {
11
    return (
12
      <SegmentedControl
13
        value={this.state.value}
14
        onChange={(evt, value) => this.setState({ value })}
15
      >
16
        <SegmentedControlItem
17
          label="One"
18
          value="one"
19
          iconType={
20
            SegmentedControlItem.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CODE
21
          }
22
        />
23
        <SegmentedControlItem
24
          label="Two"
25
          value="two"
26
          iconType={
27
            SegmentedControlItem.ICON_TYPE.INTERFACE__OPERATIONS__FILTER
28
          }
29
        />
30
        <SegmentedControlItem
31
          label="Three"
32
          value="three"
33
          iconType={SegmentedControlItem.ICON_TYPE.INTERFACE__SIGN__NUMBER}
34
        />
35
      </SegmentedControl>
36
    );
37
  }
38
}

Icons only with some hints

class TestComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: 'one',
    };
  }

  render() {
    return (
      <SegmentedControl
        type={SegmentedControl.TYPE.ICONS_ONLY}
        value={this.state.value}
        onChange={(evt, value) => this.setState({ value })}
      >
        <SegmentedControlItem
          label="One"
          value="one"
          iconType={
            SegmentedControlItem.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CODE
          }
        />
        <SegmentedControlItem
          label="Two"
          value="two"
          iconType={
            SegmentedControlItem.ICON_TYPE.INTERFACE__OPERATIONS__FILTER
          }
          hint="The second item."
        />
        <SegmentedControlItem
          label="Three"
          value="three"
          iconType={SegmentedControlItem.ICON_TYPE.INTERFACE__SIGN__NUMBER}
          hint="The third item."
        />
      </SegmentedControl>
    );
  }
}

1
class TestComponent extends React.Component {
2
  constructor(props) {
3
    super(props);
4
5
    this.state = {
6
      value: 'one',
7
    };
8
  }
9
10
  render() {
11
    return (
12
      <SegmentedControl
13
        type={SegmentedControl.TYPE.ICONS_ONLY}
14
        value={this.state.value}
15
        onChange={(evt, value) => this.setState({ value })}
16
      >
17
        <SegmentedControlItem
18
          label="One"
19
          value="one"
20
          iconType={
21
            SegmentedControlItem.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CODE
22
          }
23
        />
24
        <SegmentedControlItem
25
          label="Two"
26
          value="two"
27
          iconType={
28
            SegmentedControlItem.ICON_TYPE.INTERFACE__OPERATIONS__FILTER
29
          }
30
          hint="The second item."
31
        />
32
        <SegmentedControlItem
33
          label="Three"
34
          value="three"
35
          iconType={SegmentedControlItem.ICON_TYPE.INTERFACE__SIGN__NUMBER}
36
          hint="The third item."
37
        />
38
      </SegmentedControl>
39
    );
40
  }
41
}

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 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.

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

valueany

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

Methods