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

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

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>
    );
  }
}

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>
    );
  }
}

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>
    );
  }
}

Props

`ariaLabel` string	Provide a descriptive label for this control, e.g. "Theme selector".
`children` REQUIRED node	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.
`className` string	Appends class names to the component.Should be used only for positioning and spacing purposes.
`onChange` function	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 )`
`spacingType` enum[]	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, > >`
`style` object	Inline style for custom styling.Should be used only for positioning and spacing purposes.
`testId` string	Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`.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.
`type` enum	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 >`
`value` any	Set the currently-selected option in the control by updating this prop.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic

With some hints

Controlled

With icons

Icons only with some hints

Props

string

REQUIRED

node

string

function

enum[]

object

string

enum

any

Usage