---
title: SegmentedControl
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/controls/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

```jsx
import { SegmentedControl } from 'nr1'
```

### Examples

#### Basic

```jsx
<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

```jsx
<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

```jsx
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

```jsx
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

```jsx
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.                                                                                                                                                                                 |
| `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`. 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, |
| `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. SegmentedControl.TYPE.ICONS_ONLY, SegmentedControl.TYPE.NORMAL                                                                                                                                                                                                                                             |
| `value` any              | Set the currently-selected option in the control by updating this prop.                                                                                                                                                                                                                                                                                                                                                              |