OLYSENSE Design System

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">
    <ods-icon slot="prefix" name="hemorrhoid" label="hemorrhoid"></ods-icon>
    Option 2
  </ods-segmented-item>
  <ods-segmented-item value="3">
    <ods-icon slot="prefix" name="hemorrhoid" label="hemorrhoid"></ods-icon>
    Option 3
  </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>
        Option 1
      </OdsSegmentedItem>
      <OdsSegmentedItem value="2">
        <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
        Option 2
      </OdsSegmentedItem>
      <OdsSegmentedItem value="3">
        <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
        Option 3
      </OdsSegmentedItem>
    </OdsSegmentedGroup>
  )
}

export default Example;

Option 1

Option 2

Option 3

<ods-segmented-group gap 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">
    <ods-icon slot="prefix" name="hemorrhoid" label="hemorrhoid"></ods-icon>
    Option 2
  </ods-segmented-item>
  <ods-segmented-item value="3">
    <ods-icon slot="prefix" name="hemorrhoid" label="hemorrhoid"></ods-icon>
    Option 3
  </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 gap value="1">
      <OdsSegmentedItem value="1">
        <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
        Option 1
      </OdsSegmentedItem>
      <OdsSegmentedItem value="2">
        <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
        Option 2
      </OdsSegmentedItem>
      <OdsSegmentedItem value="3">
        <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
        Option 3
      </OdsSegmentedItem>
    </OdsSegmentedGroup>
  )
}

export default Example;

The direction attribute can be used to vertically layout items.

Option 1

Option 2

Option 3

<ods-segmented-group direction="vertical" 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">
    <ods-icon slot="prefix" name="hemorrhoid" label="hemorrhoid"></ods-icon>
    Option 2
  </ods-segmented-item>
  <ods-segmented-item value="3">
    <ods-icon slot="prefix" name="hemorrhoid" label="hemorrhoid"></ods-icon>
    Option 3
  </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 direction="vertical" value="1">
      <OdsSegmentedItem value="1">
        <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
        Option 1
      </OdsSegmentedItem>
      <OdsSegmentedItem value="2">
        <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
        Option 2
      </OdsSegmentedItem>
      <OdsSegmentedItem value="3">
        <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
        Option 3
      </OdsSegmentedItem>
    </OdsSegmentedGroup>
  )
}

export default Example;

<ods-segmented-group direction="vertical" 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 direction="vertical" 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-group';

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 default slot where `<ods-segmented-item>` elements are placed.
label	The segmented group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.
help-text	Text that describes how to use the segmented group. Alternatively, you can use the `help-text` attribute.

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
defaultValue	string	''
label	string	''
helpText help-text	string	''
errorText error-text	string	''
name	string	'option'
value	string	''
size	'small' \| 'medium' \| 'large'	'medium'
disabled	boolean	false
form	string	''
required	boolean	false
direction	'horizontal' \| 'vertical'	'horizontal'
gap	boolean	false
validity
validationMessage

Events

React Event	Description	Event Detail
ods-change	Emitted when the segmented group's selected value changes.	--
ods-input	Emitted when the segmented group receives user input.	--
ods-invalid	Emitted when the form control has been checked for validity and its constraints aren't satisfied.	--

Methods

Name	Description	Arguments
checkValidity()	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.	--
getForm()	Gets the associated form, if one exists.	--
reportValidity()	Checks for validity and shows the browser's validation message if the control is invalid.	--
setCustomValidity()	Sets a custom validation message. Pass an empty string to restore validity.	--

Parts

Name	Description
form-control	The form control that wraps the label, input, and help text.
form-control-label	The label's wrapper.
form-control-input	The input's wrapper.
form-control-help-text	The help text's wrapper.
form-control-error-text	The error text's wrapper.
button-group	The button group that wraps segmented items.
button-group__base	The button group's `base` part.

Dependencies

This component automatically imports the following dependencies.

ods-button-group

Segmented Group

Examples

Basic

Gap

Vertical

Icon Only

Importing

Slots

Properties

Events

Methods

Parts

Dependencies