Light Dark System

Radio Button

<ol-radio-button> | OlRadioButton
Since 1.0 stable

Radios buttons allow the user to select a single option from a group using a button-like control.

Radio buttons are designed to be used with radio groups. When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.

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

import OlRadioButton from '@onlive.site/ui/dist/react/radio-button';
import OlRadioGroup from '@onlive.site/ui/dist/react/radio-group';

const App = () => (
  <OlRadioGroup label="Select an option" name="a" value="1">
    <OlRadioButton value="1">Option 1</OlRadioButton>
    <OlRadioButton value="2">Option 2</OlRadioButton>
    <OlRadioButton value="3">Option 3</OlRadioButton>
  </OlRadioGroup>
);

Examples

Checked States

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

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

import OlRadioButton from '@onlive.site/ui/dist/react/radio-button';
import OlRadioGroup from '@onlive.site/ui/dist/react/radio-group';

const App = () => (
  <OlRadioGroup label="Select an option" name="a" value="1">
    <OlRadioButton value="1">Option 1</OlRadioButton>
    <OlRadioButton value="2">Option 2</OlRadioButton>
    <OlRadioButton value="3">Option 3</OlRadioButton>
  </OlRadioGroup>
);

Disabled

Use the disabled attribute to disable a radio button.

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

import OlRadioButton from '@onlive.site/ui/dist/react/radio-button';
import OlRadioGroup from '@onlive.site/ui/dist/react/radio-group';

const App = () => (
  <OlRadioGroup label="Select an option" name="a" value="1">
    <OlRadioButton value="1">Option 1</OlRadioButton>
    <OlRadioButton value="2" disabled>
      Option 2
    </OlRadioButton>
    <OlRadioButton value="3">Option 3</OlRadioButton>
  </OlRadioGroup>
);

Sizes

Use the size attribute to change a radio button’s size.

Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3 
<ol-radio-group size="small" label="Select an option" name="a" value="1">
  <ol-radio-button value="1">Option 1</ol-radio-button>
  <ol-radio-button value="2">Option 2</ol-radio-button>
  <ol-radio-button value="3">Option 3</ol-radio-button>
</ol-radio-group>

<br />

<ol-radio-group size="medium" label="Select an option" name="a" value="1">
  <ol-radio-button value="1">Option 1</ol-radio-button>
  <ol-radio-button value="2">Option 2</ol-radio-button>
  <ol-radio-button value="3">Option 3</ol-radio-button>
</ol-radio-group>

<br />

<ol-radio-group size="large" label="Select an option" name="a" value="1">
  <ol-radio-button value="1">Option 1</ol-radio-button>
  <ol-radio-button value="2">Option 2</ol-radio-button>
  <ol-radio-button value="3">Option 3</ol-radio-button>
</ol-radio-group>

import OlRadioButton from '@onlive.site/ui/dist/react/radio-button';
import OlRadioGroup from '@onlive.site/ui/dist/react/radio-group';

const App = () => (
  <OlRadioGroup size="small" label="Select an option" name="a" value="1">
    <OlRadioButton value="1">Option 1</OlRadioButton>
    <OlRadioButton value="2">Option 2</OlRadioButton>
    <OlRadioButton value="3">Option 3</OlRadioButton>
  </OlRadioGroup>

  <br />

  <OlRadioGroup size="medium" label="Select an option" name="a" value="1">
    <OlRadioButton value="1">Option 1</OlRadioButton>
    <OlRadioButton value="2">Option 2</OlRadioButton>
    <OlRadioButton value="3">Option 3</OlRadioButton>
  </OlRadioGroup>

  <br />

  <OlRadioGroup size="large" label="Select an option" name="a" value="1">
    <OlRadioButton value="1">Option 1</OlRadioButton>
    <OlRadioButton value="2">Option 2</OlRadioButton>
    <OlRadioButton value="3">Option 3</OlRadioButton>
  </OlRadioGroup>
);

Pill Buttons

Use the pill attribute to give radio buttons rounded edges.

Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3 
<ol-radio-group size="small" label="Select an option" name="a" value="1">
  <ol-radio-button pill value="1">Option 1</ol-radio-button>
  <ol-radio-button pill value="2">Option 2</ol-radio-button>
  <ol-radio-button pill value="3">Option 3</ol-radio-button>
</ol-radio-group>

<br />

<ol-radio-group size="medium" label="Select an option" name="a" value="1">
  <ol-radio-button pill value="1">Option 1</ol-radio-button>
  <ol-radio-button pill value="2">Option 2</ol-radio-button>
  <ol-radio-button pill value="3">Option 3</ol-radio-button>
</ol-radio-group>

<br />

<ol-radio-group size="large" label="Select an option" name="a" value="1">
  <ol-radio-button pill value="1">Option 1</ol-radio-button>
  <ol-radio-button pill value="2">Option 2</ol-radio-button>
  <ol-radio-button pill value="3">Option 3</ol-radio-button>
</ol-radio-group>

import OlRadioButton from '@onlive.site/ui/dist/react/radio-button';
import OlRadioGroup from '@onlive.site/ui/dist/react/radio-group';

const App = () => (
  <OlRadioGroup size="small" label="Select an option" name="a" value="1">
    <OlRadioButton pill value="1">Option 1</OlRadioButton>
    <OlRadioButton pill value="2">Option 2</OlRadioButton>
    <OlRadioButton pill value="3">Option 3</OlRadioButton>
  </OlRadioGroup>

  <br />

  <OlRadioGroup size="medium" label="Select an option" name="a" value="1">
    <OlRadioButton pill value="1">Option 1</OlRadioButton>
    <OlRadioButton pill value="2">Option 2</OlRadioButton>
    <OlRadioButton pill value="3">Option 3</OlRadioButton>
  </OlRadioGroup>

  <br />

  <OlRadioGroup size="large" label="Select an option" name="a" value="1">
    <OlRadioButton pill value="1">Option 1</OlRadioButton>
    <OlRadioButton pill value="2">Option 2</OlRadioButton>
    <OlRadioButton pill value="3">Option 3</OlRadioButton>
  </OlRadioGroup>
);

Prefix and Suffix Icons

Use the prefix and suffix slots to add icons.

Option 1 Option 2 Option 3 
<ol-radio-group label="Select an option" name="a" value="1">
  <ol-radio-button value="1">
    <ol-icon slot="prefix" name="archive"></ol-icon>
    Option 1
  </ol-radio-button>

  <ol-radio-button value="2">
    <ol-icon slot="suffix" name="bag"></ol-icon>
    Option 2
  </ol-radio-button>

  <ol-radio-button value="3">
    <ol-icon slot="prefix" name="gift"></ol-icon>
    <ol-icon slot="suffix" name="cart"></ol-icon>
    Option 3
  </ol-radio-button>
</ol-radio-group>

import OlIcon from '@onlive.site/ui/dist/react/icon';
import OlRadioButton from '@onlive.site/ui/dist/react/radio-button';
import OlRadioGroup from '@onlive.site/ui/dist/react/radio-group';

const App = () => (
  <OlRadioGroup label="Select an option" name="a" value="1">
    <OlRadioButton value="1">
      <OlIcon slot="prefix" name="archive" />
      Option 1
    </OlRadioButton>

    <OlRadioButton value="2">
      <OlIcon slot="suffix" name="bag" />
      Option 2
    </OlRadioButton>

    <OlRadioButton value="3">
      <OlIcon slot="prefix" name="gift" />
      <OlIcon slot="suffix" name="cart" />
      Option 3
    </OlRadioButton>
  </OlRadioGroup>
);

Buttons with Icons

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. 

<ol-radio-group label="Select an option" name="a" value="neutral">
  <ol-radio-button value="angry">
    <ol-icon name="emoji-angry" label="Angry"></ol-icon>
  </ol-radio-button>

  <ol-radio-button value="sad">
    <ol-icon name="emoji-frown" label="Sad"></ol-icon>
  </ol-radio-button>

  <ol-radio-button value="neutral">
    <ol-icon name="emoji-neutral" label="Neutral"></ol-icon>
  </ol-radio-button>

  <ol-radio-button value="happy">
    <ol-icon name="emoji-smile" label="Happy"></ol-icon>
  </ol-radio-button>

  <ol-radio-button value="laughing">
    <ol-icon name="emoji-laughing" label="Laughing"></ol-icon>
  </ol-radio-button>
</ol-radio-group>

import OlIcon from '@onlive.site/ui/dist/react/icon';
import OlRadioButton from '@onlive.site/ui/dist/react/radio-button';
import OlRadioGroup from '@onlive.site/ui/dist/react/radio-group';

const App = () => (
  <OlRadioGroup label="Select an option" name="a" value="neutral">
    <OlRadioButton value="angry">
      <OlIcon name="emoji-angry" label="Angry" />
    </OlRadioButton>

    <OlRadioButton value="sad">
      <OlIcon name="emoji-frown" label="Sad" />
    </OlRadioButton>

    <OlRadioButton value="neutral">
      <OlIcon name="emoji-neutral" label="Neutral" />
    </OlRadioButton>

    <OlRadioButton value="happy">
      <OlIcon name="emoji-smile" label="Happy" />
    </OlRadioButton>

    <OlRadioButton value="laughing">
      <OlIcon name="emoji-laughing" label="Laughing" />
    </OlRadioButton>
  </OlRadioGroup>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.onlive.site/@onlive.site/ui@1.8.31/cdn/components/radio-button/radio-button.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.onlive.site/@onlive.site/ui@1.8.31/cdn/components/radio-button/radio-button.js';

To import this component using a bundler:

import '@onlive.site/ui/dist/components/radio-button/radio-button.js';

To import this component as a React component:

import OlRadioButton from '@onlive.site/ui/dist/react/radio-button';

Slots

Name Description
(default) The radio button’s label.
prefix A presentational prefix icon or similar element.
suffix A presentational suffix icon or similar element.

Learn more about using slots.

Properties

Name Description Reflects Type Default
value The radio’s value. When selected, the radio group will receive this value. string -
disabled Disables the radio button. boolean false
size The radio button’s size. When used inside a radio group, the size will be determined by the radio group’s size so this attribute can typically be omitted. 'small' | 'medium' | 'large' 'medium'
pill Draws a pill-style radio button with rounded edges. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
ol-blur onOlBlur Emitted when the button loses focus. -
ol-focus onOlFocus Emitted when the button gains focus. -

Learn more about events.

Methods

Name Description Arguments
focus() Sets focus on the radio button. options: FocusOptions
blur() Removes focus from the radio button. -

Learn more about methods.

Parts

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

Learn more about customizing CSS parts.