OLYSENSE Design System

Use the disabled attribute to disable an option and prevent it from being selected.

Option 1

Option 2

Option 3

<ods-select hoist>
  <ods-option value="option-1">Option 1</ods-option>
  <ods-option value="option-2" disabled>Option 2</ods-option>
  <ods-option value="option-3">Option 3</ods-option>
</ods-select>

import { OdsSelect } from '@ods/components/react.select';
import { OdsOption } from '@ods/components/react.option';

const Example = () => {
  return (
    <OdsSelect hoist>
      <OdsOption value="option-1">Option 1</OdsOption>
      <OdsOption value="option-2" disabled>Option 2</OdsOption>
      <OdsOption value="option-3">Option 3</OdsOption>
    </OdsSelect>
  )
}

export default Example;

Add icons to the start and end of menu items using the prefix and suffix slots.

Doctor

Nurse

Patient

<ods-select label="Select a report" hoist>
  <ods-option value="option-1">
    <ods-icon slot="prefix" name="doctor" class="text-xl"></ods-icon>
    Doctor
    <ods-icon slot="suffix" name="report" class="text-xl"></ods-icon>
  </ods-option>

  <ods-option value="option-2">
    <ods-icon slot="prefix" name="nurse" class="text-xl"></ods-icon>
    Nurse
    <ods-icon slot="suffix" name="report" class="text-xl"></ods-icon>
  </ods-option>

  <ods-option value="option-3">
    <ods-icon slot="prefix" name="patient" class="text-xl"></ods-icon>
    Patient
    <ods-icon slot="suffix" name="report" class="text-xl"></ods-icon>
  </ods-option>
</ods-select>

import { OdsSelect } from '@ods/components/react.select';
import { OdsOption } from '@ods/components/react.option';
import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <OdsSelect label="Select one" hoist>
      <OdsOption value="option-1">
        <OdsIcon slot="prefix" name="doctor" className="text-xl"></OdsIcon>
        Doctor
        <OdsIcon slot="suffix" name="report" className="text-xl"></OdsIcon>
      </OdsOption>

      <OdsOption value="option-2">
        <OdsIcon slot="prefix" name="nurse" className="text-xl"></OdsIcon>
        Nurse
        <OdsIcon slot="suffix" name="report" className="text-xl"></OdsIcon>
      </OdsOption>

      <OdsOption value="option-3">
        <OdsIcon slot="prefix" name="patient" className="text-xl"></OdsIcon>
        Patient
        <OdsIcon slot="suffix" name="report" className="text-xl"></OdsIcon>
      </OdsOption>
    </OdsSelect>
  )
}

export default Example;

Importing

import '@ods/components/web.option';

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 option's label.
prefix	Used to prepend an icon or similar element to the menu item.
suffix	Used to append an icon or similar element to the menu item.

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
current	boolean	false
selected	boolean	false
value	string	''
disabled	boolean	false

Methods

Name	Description	Arguments
getTextLabel()	Returns a plain text label based on the option's content.	--

Parts

Name	Description
checked-icon	The checked icon, an `<ods-icon>` element.
base	The component's base wrapper.
label	The option's label.
prefix	The container that wraps the prefix.
suffix	The container that wraps the suffix.

Dependencies

This component automatically imports the following dependencies.

ods-icon

Option

Examples

Disabled