OLYSENSE Design System

Radios allow the user to select a single option from a group. Radios are designed to be used with radio groups .

Option 1

Option 2

Option 3

<ods-radio-group label="Select an option" name="a" value="1">
  <ods-radio value="1">Option 1</ods-radio>
  <ods-radio value="2">Option 2</ods-radio>
  <ods-radio value="3">Option 3</ods-radio>
</ods-radio-group>

import { OdsRadioGroup } from '@ods/components/react.radio-group';
import { OdsRadio } from '@ods/components/react.radio';

const Example = () => {
  return (
    <OdsRadioGroup label="Select an option" name="a" value="1">
      <OdsRadio value="1">Option 1</OdsRadio>
      <OdsRadio value="2">Option 2</OdsRadio>
      <OdsRadio value="3">Option 3</OdsRadio>
    </OdsRadioGroup>
  )
}

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-radio-group label="Select an option" name="a" value="3">
  <ods-radio value="1">Option 1</ods-radio>
  <ods-radio value="2">Option 2</ods-radio>
  <ods-radio value="3">Option 3</ods-radio>
</ods-radio-group>

import { OdsRadioGroup } from '@ods/components/react.radio-group';
import { OdsRadio } from '@ods/components/react.radio';

const Example = () => {
  return (
    <OdsRadioGroup label="Select an option" name="a" value="3">
      <OdsRadio value="1">Option 1</OdsRadio>
      <OdsRadio value="2">Option 2</OdsRadio>
      <OdsRadio value="3">Option 3</OdsRadio>
    </OdsRadioGroup>
  )
}

export default Example;

Use the disabled attribute to disable a radio.

Option 1

Option 2

Option 3

<ods-radio-group label="Select an option" name="a" value="1">
  <ods-radio value="1">Option 1</ods-radio>
  <ods-radio value="2" disabled>Option 2</ods-radio>
  <ods-radio value="3">Option 3</ods-radio>
</ods-radio-group>

import { OdsRadioGroup } from '@ods/components/react.radio-group';
import { OdsRadio } from '@ods/components/react.radio';

const Example = () => {
  return (
    <OdsRadioGroup label="Select an option" name="a" value="1">
      <OdsRadio value="1">Option 1</OdsRadio>
      <OdsRadio value="2" disabled>Option 2</OdsRadio>
      <OdsRadio value="3">Option 3</OdsRadio>
    </OdsRadioGroup>
  )
}

export default Example;

Importing

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

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 radio's label.

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
checked	boolean	false
value	string
size	'small' \| 'medium' \| 'large'	'medium'
disabled	boolean	false

Events

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

Parts

Name	Description
base	The component's base wrapper.
control	The circular container that wraps the radio's checked state.
control--checked	The radio control when the radio is checked.
checked-icon	The checked icon, an `<ods-icon>` element.
label	The container that wraps the radio's label.

Dependencies

This component automatically imports the following dependencies.

ods-icon

See Radio Group for more details

Radio

Examples

Initial Value

Disabled

Importing

Slots

Properties

Events

Parts

Dependencies

Accessibility