Since Shoelace 2.0 Code stable Pattern stable Figma ready

Radio

<sl-radio> | SlRadio

Radios allow the user to select a single option from a group.

Examples

Basic Radio

Radios are designed to be used with radio groups.

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

sl-radio-group label="Select an option" name="a" value="1"
  sl-radio value="1" Option 1
  sl-radio value="2" Option 2
  sl-radio value="3" Option 3

import SlRadio from '@teamshares/shoelace/dist/react/radio';
import SlRadioGroup from '@teamshares/shoelace/dist/react/radio-group';

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

Initial Value

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

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

sl-radio-group label="Select an option" name="a" value="3"
  sl-radio value="1" Option 1
  sl-radio value="2" Option 2
  sl-radio value="3" Option 3

import SlRadio from '@teamshares/shoelace/dist/react/radio';
import SlRadioGroup from '@teamshares/shoelace/dist/react/radio-group';

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

Disabled

Use the disabled attribute to disable a radio.

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

sl-radio-group label="Select an option" name="a" value="1"
  sl-radio value="1" Option 1
  sl-radio value="2" disabled="true" Option 2
  sl-radio value="3" Option 3

import SlRadio from '@teamshares/shoelace/dist/react/radio';
import SlRadioGroup from '@teamshares/shoelace/dist/react/radio-group';

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

Sizes

Add the size attribute to the Radio Group to change the radios’ size.

Small 1 Small 2 Small 3
Medium 1 Medium 2 Medium 3
Large 1 Large 2 Large 3 
<sl-radio-group size="small" value="1">
  <sl-radio value="1">Small 1</sl-radio>
  <sl-radio value="2">Small 2</sl-radio>
  <sl-radio value="3">Small 3</sl-radio>
</sl-radio-group>

<br />

<sl-radio-group size="medium" value="1">
  <sl-radio value="1">Medium 1</sl-radio>
  <sl-radio value="2">Medium 2</sl-radio>
  <sl-radio value="3">Medium 3</sl-radio>
</sl-radio-group>

<br />

<sl-radio-group size="large" value="1">
  <sl-radio value="1">Large 1</sl-radio>
  <sl-radio value="2">Large 2</sl-radio>
  <sl-radio value="3">Large 3</sl-radio>
</sl-radio-group>

sl-radio size="small" Small
sl-radio size="medium" Medium
sl-radio size="large" Large

import SlRadio from '@teamshares/shoelace/dist/react/radio';

const App = () => (
  <>
    <SlRadioGroup size="small" value="1">
      <SlRadio value="1">Small 1</SlRadio>
      <SlRadio value="2">Small 2</SlRadio>
      <SlRadio value="3">Small 3</SlRadio>
    </SlRadioGroup>

    <br />

    <SlRadioGroup size="medium" value="1">
      <SlRadio value="1">Medium 1</SlRadio>
      <SlRadio value="2">Medium 2</SlRadio>
      <SlRadio value="3">Medium 3</SlRadio>
    </SlRadioGroup>

    <br />

    <SlRadioGroup size="large" value="1">
      <SlRadio value="1">Large 1</SlRadio>
      <SlRadio value="2">Large 2</SlRadio>
      <SlRadio value="3">Large 3</SlRadio>
    </SlRadioGroup>
  </>
);

Contained

Use the contained attribute to add a container around the radio.

Option 1 Option 2 Option 3
A short description about this option
 
<sl-radio-group label="Select an option" name="a" value="3">
  <sl-radio contained value="1">Option 1</sl-radio>
  <sl-radio contained disabled value="2">Option 2</sl-radio>
  <sl-radio contained value="3">
    Option 3
    <div slot="description">A short description about this option</div>
  </sl-radio>
</sl-radio-group>

sl-radio-group label="Select an option" name="a" value="3"
  sl-radio contained="true" value="1" Option 1
  sl-radio contained="true" disabled="true" value="2" Option 2
  sl-radio contained="true" value="3" Option 3
    div slot="description" A short description about this option

import { SlRadio } from '@teamshares/shoelace/dist/react';

const App = () => (
  <>
    <SlRadioGroup label="Select an option" name="a" value="3">
      <SlRadio contained value="1">
        Option 1
      </SlRadio>
      <SlRadio contained value="2" disabled>
        Option 2
      </SlRadio>
      <SlRadio contained value="3">
        Option 3<div slot="description">A short description about this option</div>
      </SlRadio>
    </SlRadioGroup>
  </>
);

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.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/cdn/components/radio/radio.js"></script>

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

import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/cdn/components/radio/radio.js';

To import this component using a bundler: 

import '@shoelace-style/shoelace/dist/components/radio/radio.js';

To import this component as a React component: 

import SlRadio from '@shoelace-style/shoelace/dist/react/radio';

Slots

Name Description
(default) The radio’s label.
description A description of the radio’s label.

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 -
size The radio’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'
disabled Disables the radio. boolean false
contained Draws a container around the radio button. 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
sl-blur onSlBlur Emitted when the control loses focus. -
sl-focus onSlFocus Emitted when the control gains focus. -

Learn more about events.

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 <sl-icon> element.
label The container that wraps the radio’s label.
description The container that wraps the radio’s description.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>