OLYSENSE Design System

A Segmented Item is designed to be used within a Segmented Group . When a Segmented Item has focus, the arrow keys can be used to change the selected option.

Option 1

Option 2

Option 3

<ods-segmented-group value="1">
  <ods-segmented-item value="1">Option 1</ods-segmented-item>
  <ods-segmented-item value="2">Option 2</ods-segmented-item>
  <ods-segmented-item value="3">Option 3</ods-segmented-item>
</ods-segmented-group>

import { OdsSegmentedGroup } from '@ods/components/react.segmented-group';
import { OdsSegmentedItem } from '@ods/components/react.segmented-item';

const Example = () => {
  return (
    <OdsSegmentedGroup value="1">
      <OdsSegmentedItem value="1">Option 1</OdsSegmentedItem>
      <OdsSegmentedItem value="2">Option 2</OdsSegmentedItem>
      <OdsSegmentedItem value="3">Option 3</OdsSegmentedItem>
    </OdsSegmentedGroup>
  )
}

export default Example;

To set the initial value and checked state, use the value attribute on the containing radio group.

Option 1

Option 2

Option 3

<ods-segmented-group value="2">
  <ods-segmented-item value="1">Option 1</ods-segmented-item>
  <ods-segmented-item value="2">Option 2</ods-segmented-item>
  <ods-segmented-item value="3">Option 3</ods-segmented-item>
</ods-segmented-group>

import { OdsSegmentedGroup } from '@ods/components/react.segmented-group';
import { OdsSegmentedItem } from '@ods/components/react.segmented-item';

const Example = () => {
  return (
    <OdsSegmentedGroup value="2">
      <OdsSegmentedItem value="1">Option 1</OdsSegmentedItem>
      <OdsSegmentedItem value="2">Option 2</OdsSegmentedItem>
      <OdsSegmentedItem value="3">Option 3</OdsSegmentedItem>
    </OdsSegmentedGroup>
  )
}

export default Example;

Use the disabled attribute to disable a segmented item.

Option 1

Option 2

Option 3

<ods-segmented-group value="1">
  <ods-segmented-item value="1">Option 1</ods-segmented-item>
  <ods-segmented-item value="2" disabled>Option 2</ods-segmented-item>
  <ods-segmented-item value="3">Option 3</ods-segmented-item>
</ods-segmented-group>

import { OdsSegmentedGroup } from '@ods/components/react.segmented-group';
import { OdsSegmentedItem } from '@ods/components/react.segmented-item';

const Example = () => {
  return (
    <OdsSegmentedGroup value="1">
      <OdsSegmentedItem value="1">Option 1</OdsSegmentedItem>
      <OdsSegmentedItem value="2" disabled>Option 2</OdsSegmentedItem>
      <OdsSegmentedItem value="3">Option 3</OdsSegmentedItem>
    </OdsSegmentedGroup>
  )
}

export default Example;

Use the prefix and suffix slots to add icons.

Option 1

Option 2

Option 3

<ods-segmented-group value="1">
  <ods-segmented-item value="1">
    <ods-icon slot="prefix" name="hemorrhoid" label="hemorrhoid"></ods-icon>
    Option 1
  </ods-segmented-item>
  <ods-segmented-item value="2">
    Option 2
    <ods-icon slot="suffix" name="hemorrhoid" label="hemorrhoid"></ods-icon>
  </ods-segmented-item>
  <ods-segmented-item value="3">
    <ods-icon slot="prefix" name="hemorrhoid" label="hemorrhoid"></ods-icon>
    Option 3
    <ods-icon slot="suffix" name="hemorrhoid" label="hemorrhoid"></ods-icon>
  </ods-segmented-item>
</ods-segmented-group>

import { OdsSegmentedGroup } from '@ods/components/react.segmented-group';
import { OdsSegmentedItem } from '@ods/components/react.segmented-item';
import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <OdsSegmentedGroup value="1">
      <OdsSegmentedItem value="1">
        <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
        Option 1
      </OdsSegmentedItem>
      <OdsSegmentedItem value="2">
        Option 2
        <OdsIcon slot="suffix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
      </OdsSegmentedItem>
      <OdsSegmentedItem value="3">
        <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
        Option 3
        <OdsIcon slot="suffix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
      </OdsSegmentedItem>
    </OdsSegmentedGroup>
  )
}

export default Example;

You can omit button labels and use icons instead. Make sure to set a label attribute on each icon so screen readers will announce each option correctly.

<ods-segmented-group value="1">
  <ods-segmented-item value="1">
    <ods-icon slot="prefix" name="hemorrhoid" label="hemorrhoid"></ods-icon>
  </ods-segmented-item>
  <ods-segmented-item value="2">
    <ods-icon slot="prefix" name="hemorrhoid" label="hemorrhoid"></ods-icon>
  </ods-segmented-item>
  <ods-segmented-item value="3">
    <ods-icon slot="prefix" name="hemorrhoid" label="hemorrhoid"></ods-icon>
  </ods-segmented-item>
</ods-segmented-group>

import { OdsIcon } from '@ods/components/react.icon';
import { OdsSegmentedGroup } from '@ods/components/react.segmented-group';
import { OdsSegmentedItem } from '@ods/components/react.segmented-item';

const Example = () => {
  return (
    <OdsSegmentedGroup value="1">
      <OdsSegmentedItem value="1">
        <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
      </OdsSegmentedItem>
      <OdsSegmentedItem value="2">
        <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
      </OdsSegmentedItem>
      <OdsSegmentedItem value="3">
        <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
      </OdsSegmentedItem>
    </OdsSegmentedGroup>
  )
}

export default Example;

Importing

import '@ods/components/web.segmented-item';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

Name	Description
(default)	The segmented-item button's label.
prefix	A presentational prefix icon or similar element.
suffix	A presentational suffix icon or similar element.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Type	Default
value	string
disabled	boolean	false
size	'small' \| 'medium' \| 'large'	'medium'
pill	boolean	false

Events

React Event	Description	Event Detail
ods-blur	Emitted when the button loses focus.	--
ods-focus	Emitted when the button gains focus.	--

Methods

Name	Description	Arguments
focus()	Sets focus on the segmented-item button.	--
blur()	Removes focus from the segmented-item button.	--

Parts

Name	Description
base	The component's base wrapper.
button	The internal `<button>` element.
button--checked	The internal button element when the segmented-item button is checked.
prefix	The container that wraps the prefix.
label	The container that wraps the segmented-item button's label.
suffix	The container that wraps the suffix.

Segmented Item

Examples

Basic

Checked States

Disabled

Prefix and Suffix Icons

Buttons With Icons

Importing

Slots

Properties

Events

Methods

Parts