OLYSENSE Design System

Radio groups are used to group multiple radios so they function as a single form control.

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;

Help Text

Add descriptive help text to a radio group with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.

Option 1

Option 2

Option 3

<ods-radio-group label="Select an option" help-text="Select an option that needs treatment." 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" help-text="Select an option that needs treatment." 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;

Use the required attribute to specify the input is a required field when using within a form.

Option 1

Option 2

Option 3

<ods-radio-group required 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 required 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 the entire group of radio buttons. You can also disable individual radios as shown here .

Option 1

Option 2

Option 3

<ods-radio-group disabled  help-text="Sample help text" 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 disabled help-text="Sample help text" 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;

Use the error-text attribute to customize the error message shown. Read more about error validation here .

<form novalidate>
  <ods-radio-group required error-text="Sample error text" label="Select an option" name="a">
    <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>
</form>

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

const Example = () => {
  return (
    <form noValidate>
      <OdsRadioGroup
        error-text="Sample error text"
        required
        label="Select an option"
        name="a">
        <OdsRadio value="1">Option 1</OdsRadio>
        <OdsRadio value="2">Option 2</OdsRadio>
        <OdsRadio value="3">Option 3</OdsRadio>
      </OdsRadioGroup>
    </form>
  )
}

export default Example;

You can listen for the ods-input event to determine when an input is updated. To see other input events check out the events below . You can also see how inputs are used in forms by checking out the form section .

Option 1

Option 2

Option 3

<ods-radio-group id="input-example" 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>

<script>
  const input = document.getElementById('input-example');

  const onInputHandler = (event) => {
    const target = event.target;

    alert(`Select radio button is ${target.value}`);
  };

  input.addEventListener('ods-input', (event) => onInputHandler(event));
</script>

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

export const Example = () => {
  const onInputHandler = (event: OdsInputEvent) => {
    const target = event.target as HTMLInputElement;

    alert(`Select radio button is ${target.value}`);
  };

  return (
    <OdsRadioGroup onOdsInput={onInputHandler} 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;

Importing

import '@ods/components/web.radio-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-radio>` elements are placed.
label	The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.
help-text	Text that describes how to use the radio 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
validity
validationMessage

Events

React Event	Description	Event Detail
ods-change	Emitted when the radio group's selected value changes.	--
ods-input	Emitted when the radio 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 radio buttons.
button-group__base	The button group's `base` part.

Dependencies

This component automatically imports the following dependencies.

ods-button-group

Include intuitive labels with radio groups.

When tabbing, focus will fall on the first option if no options are selected. If there is a selection, focus will fall on that option first.

Radio Group

Examples

Basic

Help Text

Required

Disabled

Error

Handling An Event

Importing

Slots

Properties

Events

Methods

Parts

Dependencies

Accessibility