SegmentedControl

A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Within the control, all segments are equal in width. Like buttons, segments can contain text or images. Segmented controls are often used to display different views.

Import

import { SegmentedControl, ControlSegment } from '@sajari-ui/core';

import { SegmentedControl, ControlSegment } from '@sajari-ui/core';

Usage

Basic usage of SegmentedControl and ControlSegment.

Editable Example

function Example() {
  const [value, setValue] = React.useState('1');

  return (
    <SegmentedControl onChange={(v) => setValue(v)} value={value} name="example-1">
      <ControlSegment value="1" loading>
        Option 1
      </ControlSegment>
      <ControlSegment value="2" icon="small-star">
        Option 2
      </ControlSegment>
      <ControlSegment value="3" icon="small-grid" disabled>
        Option 3
      </ControlSegment>
    </SegmentedControl>
  );
}

function Example() {
  const [value, setValue] = React.useState('1');
  return (
    <SegmentedControl onChange={(v) => setValue(v)} value={value} name="example-1">
      <ControlSegment value="1" loading>
        Option 1
      </ControlSegment>
      <ControlSegment value="2" icon="small-star">
        Option 2
      </ControlSegment>
      <ControlSegment value="3" icon="small-grid" disabled>
        Option 3
      </ControlSegment>
    </SegmentedControl>
  );
}

Sizes

The default size is md but it's possible to use sm and lg versions using the size prop.

Editable Example

function Example() {
  const [value, setValue] = React.useState('1');

  return (
    <SegmentedControl onChange={(v) => setValue(v)} value={value} name="example-1" size="sm">
      <ControlSegment value="1" loading>
        Option 1
      </ControlSegment>
      <ControlSegment value="2" icon="small-star">
        Option 2
      </ControlSegment>
      <ControlSegment value="3" icon="small-grid" disabled>
        Option 3
      </ControlSegment>
    </SegmentedControl>
  );
}

function Example() {
  const [value, setValue] = React.useState('1');
  return (
    <SegmentedControl onChange={(v) => setValue(v)} value={value} name="example-1" size="sm">
      <ControlSegment value="1" loading>
        Option 1
      </ControlSegment>
      <ControlSegment value="2" icon="small-star">
        Option 2
      </ControlSegment>
      <ControlSegment value="3" icon="small-grid" disabled>
        Option 3
      </ControlSegment>
    </SegmentedControl>
  );
}

Editable Example

function Example() {
  const [value, setValue] = React.useState('1');

  return (
    <SegmentedControl onChange={(v) => setValue(v)} value={value} name="example-1" size="lg">
      <ControlSegment value="1" loading>
        Option 1
      </ControlSegment>
      <ControlSegment value="2" icon="small-star">
        Option 2
      </ControlSegment>
      <ControlSegment value="3" icon="small-grid" disabled>
        Option 3
      </ControlSegment>
    </SegmentedControl>
  );
}

function Example() {
  const [value, setValue] = React.useState('1');
  return (
    <SegmentedControl onChange={(v) => setValue(v)} value={value} name="example-1" size="lg">
      <ControlSegment value="1" loading>
        Option 1
      </ControlSegment>
      <ControlSegment value="2" icon="small-star">
        Option 2
      </ControlSegment>
      <ControlSegment value="3" icon="small-grid" disabled>
        Option 3
      </ControlSegment>
    </SegmentedControl>
  );
}

Props

SegmentedControl Props

SegmentedControl composes the RadioButtonGroup component but excludes the spacing and inline props.

Name	Type	Description
`id`	`string`	The id of the checkbox group.
`name`	`string`	The name of the input field in a radio (useful for form submission).
`defaultValue`	`string`	The initial value of the radio group.
`value`	`RadioProps['value']`	The value of the radio group.
`onChange`	`function`	The callback fired when any children Radio is checked.

ControlSegment Props

Name	Type	Description
`value`	`string` or `number`	The value to be used for the segment. This is the value that will be returned on form submission.
`disabled`	`boolean`	If `true`, the segment will be disabled.
`loading`	`boolean`	If `true`, a spinner will be displayed before any child elements.
`children`	`React.ReactNode`	The child elements.
`icon`	`IconProps['name']`	An icon to display before any children.
`iconSize`	`IconProps['size']`	The size of the icon to display before any children.