Radio Group
Examples
Basic Radio Group
Help Text
Label with Tooltip
Horizontal Radio Group
Contained Radio Group
Group with Segmented Controls
Disabling Options
Sizing Options
Validation
Custom Validity
Usage
When to Use a Radio Group
When to Use Something Else
Labels, Help Text, Etc.
Testing
With Cypress
Component Props
Slots
Events
Methods
CSS Parts
Dependencies

Since Shoelace 2.0

Code stable

Pattern stable

Figma ready

Radio Group

sl-radio-group

Radio groups are used to group multiple radio buttons or segmented controls so they function as a single control.

Examples

Basic Radio Group

A basic radio group lays out multiple radio items vertically. Generally a radio group should have one item selected by default.

Issue shares

Employee buyback

Cancel a certificate

<sl-radio-group label="What would you like to do?" name="a" value="issue_shares">
  <sl-radio value="issue_shares">Issue shares</sl-radio>
  <sl-radio value="employee_buyback">Employee buyback</sl-radio>
  <sl-radio value="cancel_certificate">Cancel a certificate</sl-radio>
</sl-radio-group>

sl-radio-group[
  label="What would you like to do?"
  name="a"
  value="issue_shares"
]
  sl-radio value="issue_shares" Issue shares
  sl-radio value="employee_buyback" Employee buyback
  sl-radio value="cancel_certificate" Cancel a certificate

/*
  — NOTE: To set default value for initial page load, ensure a value is set
  in the controller's #new action:

  e.g. if using `ts_form_for @cap_table_event`, set @cap_table_event = CapTableEvent.new(a: "issue_shares")
*/
= ts_form_for ... do |f|
  = f.input :a,
    as: :radio_buttons,
    label: "What would you like to do?",
    collection: [
      ["Issue shares", "issue_shares"],
      ["Employee buyback", "employee_buyback"],
      ["Cancel a certificate", "cancel_certificate"],
    ]

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>
);

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.

Issue shares

Employee buyback

Cancel a certificate

Issue shares

Employee buyback

Cancel a certificate

Contact support if you don’t see the option you need here

<sl-radio-group label="What would you like to do?" help-text="Contact support if you don't see the option you need here" name="a" value="issue_shares">
  <sl-radio value="issue_shares">Issue shares</sl-radio>
  <sl-radio value="employee_buyback">Employee buyback</sl-radio>
  <sl-radio value="cancel_certificate">Cancel a certificate</sl-radio>
</sl-radio-group>
<br />
<br />
<sl-radio-group label="What would you like to do?" name="a" value="issue_shares">
  <sl-radio value="issue_shares">Issue shares</sl-radio>
  <sl-radio value="employee_buyback">Employee buyback</sl-radio>
  <sl-radio value="cancel_certificate">Cancel a certificate</sl-radio>
  <div slot="help-text"><a href="#" class="ts-text-link">Contact support</a> if you don't see the option you need here</div>
</sl-radio-group>

sl-radio-group[
  label="What would you like to do?"
  name="a"
  value="issue_shares"
  help-text="Contact support if you don't see the option you need here"
]
  sl-radio value="issue_shares" Issue shares
  sl-radio value="employee_buyback" Employee buyback
  sl-radio value="cancel_certificate" Cancel a certificate
br
br
sl-radio-group[
  label="What would you like to do?"
  name="a"
  value="issue_shares"
]
  sl-radio value="issue_shares" Issue shares
  sl-radio value="employee_buyback" Employee buyback
  sl-radio value="cancel_certificate" Cancel a certificate
  div slot="help-text"
    a href="#" class="ts-text-link" Contact support
    | if you don't see the option you need here

/*
  — NOTE: To set default value for initial page load, ensure a value is set
  in the controller's #new action:
  e.g. if using `ts_form_for @cap_table_event`, set @cap_table_event = CapTableEvent.new(a: "issue_shares")

  — NOTE: Slots are not supported with ts_form_for —
*/
= ts_form_for ... do |f|
  = f.input :a,
    as: :radio_buttons,
    label: "What would you like to do?",
    collection: [
      ["Issue shares", "issue_shares"],
      ["Employee buyback", "employee_buyback"],
      ["Cancel a certificate", "cancel_certificate"],
    ],
    wrapper_html: {
      "help-text": "Contact support if you don't see the option you need here"
    }

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

const App = () => (
  <SlRadioGroup label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
    <SlRadio value="1">Option 1</SlRadio>
    <SlRadio value="2">Option 2</SlRadio>
    <SlRadio value="3">Option 3</SlRadio>
  </SlRadioGroup>
);

Use the label-tooltip attribute to add text that appears in a tooltip triggered by an info icon next to the label.

Usage: Use a label tooltip to provide helpful but non-essential instructions or examples to guide people when making a selection from the radio group. Use help text to communicate instructions or requirements for making a selection without errors.

Issue shares

Employee buyback

Cancel a certificate

<sl-radio-group label="What would you like to do?" help-text="Contact support if you don't see the option you need here" name="a" value="issue_shares" label-tooltip="These changes will update the cap table">
  <sl-radio value="issue_shares">Issue shares</sl-radio>
  <sl-radio value="employee_buyback">Employee buyback</sl-radio>
  <sl-radio value="cancel_certificate">Cancel a certificate</sl-radio>
</sl-radio-group>

sl-radio-group[
  label="What would you like to do?"
  help-text="Contact support if you don't see the option you need here"
  name="a" value="issue_shares"
  label-tooltip="These changes will update the cap table"
]
  sl-radio value="issue_shares" Issue shares
  sl-radio value="employee_buyback" Employee buyback
  sl-radio value="cancel_certificate" Cancel a certificate

/*
  — NOTE: To set default value for initial page load, ensure a value is set
  in the controller's #new action:
  e.g. if using `ts_form_for @cap_table_event`, set @cap_table_event = CapTableEvent.new(a: "issue_shares")
*/
= ts_form_for ... do |f|
  = f.input :a,
    as: :radio_buttons,
    label: "What would you like to do?",
    collection: [
      ["Issue shares", "issue_shares"],
      ["Employee buyback", "employee_buyback"],
      ["Cancel a certificate", "cancel_certificate"],
    ],
    wrapper_html: {
      "help-text": "Contact support if you don't see the option you need here",
      "label-tooltip": "These changes will update the cap table",
    }

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

const App = () => (
  <SlRadioGroup label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
    <SlRadio value="1">Option 1</SlRadio>
    <SlRadio value="2">Option 2</SlRadio>
    <SlRadio value="3">Option 3</SlRadio>
  </SlRadioGroup>
);

Horizontal Radio Group

Use the horizontal attribute to lay out multiple radio items horizontally.

Making the horizontal radio group responsive: Use a container query to adjust the layout of the radio group’s form-control-input part (which wraps the radio items) at a custom target breakpoint (the container’s width when the horizontal layout breaks). In the example below, a container query checks the width of the radio group container and switches the layout to vertical (setting flex-direction to column) when the container becomes too narrow for a horizontal layout.

Issue shares

Employee buyback

<sl-radio-group id="question-1" label="What would you like to do?" name="a" value="issue_shares" horizontal>
  <sl-radio value="issue_shares">Issue shares</sl-radio>
  <sl-radio value="employee_buyback">Employee buyback</sl-radio>
</sl-radio-group>

<style>
  sl-radio-group[id="question-1"] {
    container-type: inline-size;
    container-name: question-1;
  }

  @container question-1 (max-width: 360px) {
    sl-radio-group[id="question-1"]::part(form-control-input) {
      flex-direction: column;
    }
  }
</style>

sl-radio-group[
  id="question-1"
  label="What would you like to do?"
  name="a"
  value="issue_shares"
  horizontal=true
]
  sl-radio value="issue_shares" Issue shares
  sl-radio value="employee_buyback" Employee buyback

css:
    sl-radio-group[id="question-1"] {
    container-type: inline-size;
    container-name: question-1;
  }

  @container question-1 (max-width: 360px) {
    sl-radio-group[id="question-1"]:part(form-control-input) {
      flex-direction: column;
    }
  }

/*
  — NOTE: To set default value for initial page load, ensure a value is set
  in the controller's #new action:
  e.g. if using `ts_form_for @cap_table_event`, set @cap_table_event = CapTableEvent.new(a: "issue_shares")
*/
= ts_form_for ... do |f|
  = f.input :a,
    as: :radio_buttons,
    label: "What would you like to do?",
    collection: [
      ["Issue shares", "issue_shares"],
      ["Employee buyback", "employee_buyback"],
    ],
    wrapper_html: {
      horizontal: true,
      id: "question-1",
    }

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

const App = () => (
  <SlRadioGroup label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
    <SlRadio value="1">Option 1</SlRadio>
    <SlRadio value="2">Option 2</SlRadio>
    <SlRadio value="3">Option 3</SlRadio>
  </SlRadioGroup>
);

Contained Radio Group

Use the contained attribute to draw a card-like container around each radio item in the radio group. This style is useful for giving more emphasis to the list of options.

This option can be combined with the horizontal attribute.

Issue shares

Employee buyback

Cancel a certificate

Issue shares

Employee buyback

Cancel a certificate

<sl-radio-group label="What would you like to do?" help-text="Contact support if you don't see the option you need here" name="a" value="issue_shares" contained>
  <sl-radio value="issue_shares">Issue shares</sl-radio>
  <sl-radio value="employee_buyback">Employee buyback</sl-radio>
  <sl-radio value="cancel_certificate">Cancel a certificate</sl-radio>
</sl-radio-group>
<br/>
<br/>
<sl-radio-group label="What would you like to do?" help-text="Contact support if you don't see the option you need here" name="b" value="issue_shares" contained horizontal>
  <sl-radio value="issue_shares">Issue shares</sl-radio>
  <sl-radio value="employee_buyback">Employee buyback</sl-radio>
  <sl-radio value="cancel_certificate">Cancel a certificate</sl-radio>
</sl-radio-group>

sl-radio-group[
  label="What would you like to do?"
  name="a"
  value="issue_shares"
  help-text="Contact support if you don't see the option you need here"
  contained=true
]
  sl-radio value="issue_shares" Issue shares
  sl-radio value="employee_buyback" Employee buyback
  sl-radio value="cancel_certificate" Cancel a certificate
br
br
sl-radio-group[
  label="What would you like to do?"
  name="b"
  value="issue_shares"
  help-text="Contact support if you don't see the option you need here"
  horizontal=true
  contained=true
]
  sl-radio value="issue_shares" Issue shares
  sl-radio value="employee_buyback" Employee buyback
  sl-radio value="cancel_certificate" Cancel a certificate

/*
  — NOTE: To set default value for initial page load, ensure a value is set
  in the controller's #new action:
  e.g. if using `ts_form_for @cap_table_event`, set @cap_table_event = CapTableEvent.new(a: "issue_shares")
*/
= ts_form_for ... do |f|
  = f.input :a,
    as: :radio_buttons,
    label: "What would you like to do?",
    collection: [
      ["Issue shares", "issue_shares"],
      ["Employee buyback", "employee_buyback"],
      ["Cancel a certificate", "cancel_certificate"],
    ],
    wrapper_html: {
      "help-text": "Contact support if you don't see the option you need here"
      horizontal: true,
    }
  = f.input :b,
    as: :radio_buttons,
    label: "What would you like to do?",
    collection: [
      ["Issue shares", "issue_shares"],
      ["Employee buyback", "employee_buyback"],
      ["Cancel a certificate", "cancel_certificate"],
    ],
    wrapper_html: {
      "help-text": "Contact support if you don't see the option you need here"
      horizontal: true,
      contained: true,
    }

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

const App = () => (
  <SlRadioGroup label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
    <SlRadio value="1">Option 1</SlRadio>
    <SlRadio value="2">Option 2</SlRadio>
    <SlRadio value="3">Option 3</SlRadio>
  </SlRadioGroup>
);

Adding the contained attribute to the parent Radio Group or to any radio in the group will create contained radios for the entire group.

Group with Segmented Controls

Shoelace’s radio buttons, also commonly called Segmented Controls, offer an alternate way to display radio controls. In this case, an internal button group is used to group the buttons into a single, cohesive control.

Note: The Radio Button pattern is being redesigned. Please check with the design team before using this pattern.

Option 1

Option 2

Option 3

<sl-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
  <sl-radio-button value="1">Option 1</sl-radio-button>
  <sl-radio-button value="2">Option 2</sl-radio-button>
  <sl-radio-button value="3">Option 3</sl-radio-button>
</sl-radio-group>

sl-radio-group[
  label="Select an option"
  help-text="Select an option that makes you proud."
  name="a"
  value="1"
]
  sl-radio-button value="1" Option 1
  sl-radio-button value="2" Option 2
  sl-radio-button value="3" Option 3

/*
  NOTE: `ts_form_for` doesn't support `sl-radio-button`.
*/

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

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

Disabling Options

Radios and radio buttons can be disabled by adding the disabled attribute to the respective options inside the radio group.

Issue shares

Employee buyback

Cancel a certificate

<sl-radio-group label="What would you like to do?" name="a" value="issue_shares">
  <sl-radio value="issue_shares">Issue shares</sl-radio>
  <sl-radio value="employee_buyback">Employee buyback</sl-radio>
  <sl-radio value="cancel_certificate" disabled>Cancel a certificate</sl-radio>
</sl-radio-group>

sl-radio-group[
  label="What would you like to do?"
  name="a"
  value="issue_shares"
]
  sl-radio value="issue_shares" Issue shares
  sl-radio value="employee_buyback" Employee buyback
  sl-radio value="cancel_certificate" disabled=true Cancel a certificate

/*
  — NOTE: To set default value for initial page load, ensure a value is set
  in the controller's #new action:
  e.g. if using `ts_form_for @cap_table_event`,
  set @cap_table_event = CapTableEvent.new(a: "issue_shares")

  When rendering `sl-radio-group` with ts_form_for, pass additional
  attributes such as `disabled` and `description` as extra items
  in the collection array after the label and value.
  By default Simple Form will use the first item
  as the label and the second item as the value, then pass
  any additional array items as attributes on the `sl-radio`.
*/
= ts_form_for ... do |f|
  = f.input :a,
    as: :radio_buttons,
    label: "What would you like to do?",
    collection: [
      [
        "Issue shares",
        "issue_shares"
      ],
      [
        "Employee buyback",
        "employee_buyback"
      ],
      [
        "Cancel a certificate",
        "cancel_certificate"
        disabled: true,
      ],
    ]

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>
);

Sizing Options

The size of Radios and Radio Buttons will be determined by the Radio Group’s size attribute.

Sizes small and large are currently not part of the Teamshares Design System, and there are no Figma components for these options. Please check with the design team before using these options.

Small

Medium

Large

<sl-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
  <sl-radio value="small">Small</sl-radio>
  <sl-radio value="medium">Medium</sl-radio>
  <sl-radio value="large">Large</sl-radio>
</sl-radio-group>

<script>
  const radioGroup = document.querySelector('.radio-group-size');

  radioGroup.addEventListener('sl-change', () => {
    radioGroup.size = radioGroup.value;
  });
</script>

sl-radio-group.radio-group-size[
  label="Select an option"
  size="medium"
  value="medium"
]
  sl-radio value="small" Small
  sl-radio value="medium" Medium
  sl-radio value="large" Large

javascript:
  const radioGroup = document.querySelector('.radio-group-size');
  radioGroup.addEventListener('sl-change', () => {
    radioGroup.size = radioGroup.value;
  });

/*
  — NOTE: To set default value for initial page load, ensure a value is set
  in the controller's #new action:
  e.g. if using `ts_form_for @cap_table_event`, set @cap_table_event = CapTableEvent.new(a: "issue_shares")
*/
= ts_form_for ... do |f|
  = f.input :a,
    as: :radio_buttons,
    label: "Select an option",
    collection: [
      ["Small", "small"],
      ["Medium", "medium"],
      ["Large", "large"],
    ],
    wrapper_html: {
      class: "radio-group-size"
    }

javascript:
  const radioGroup = document.querySelector('.radio-group-size');
  radioGroup.addEventListener('sl-change', () => {
    radioGroup.size = radioGroup.value;
  });

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

const App = () => {
  const [size, setSize] = useState('medium');

  return (
    <>
      <SlRadioGroup
        label="Select an option"
        size={size}
        value={size}
        class="radio-group-size"
        onSlChange={event => setSize(event.target.value)}
      >
        <SlRadio value="small">Small</SlRadio>
        <SlRadio value="medium">Medium</SlRadio>
        <SlRadio value="large">Large</SlRadio>
      </SlRadioGroup>
    </>
  );
};

Radios and Radio Buttons also have a size attribute. This can be useful in certain compositions, but it will be ignored when used inside of a Radio Group.

Validation

Set the required attribute to make selecting an option mandatory. If a value has not been selected, it will prevent the form from submitting and display an error message.

<form class="validation">
  <sl-radio-group label="Select an option" name="a" required>
    <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>
  <br />
  <sl-button type="submit" variant="primary">Submit</sl-button>
</form>

<script type="module">
  const form = document.querySelector('.validation');

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
    customElements.whenDefined('sl-radio-group'),
  ]).then(() => {
  // Handle form submit
    form.addEventListener('submit', event => {
      event.preventDefault();
      alert('All fields are valid!');
    });
  });
</script>

form.validation
  sl-radio-group[
    label="Select an option"
    name="a"
    required=true
  ]
    sl-radio value="1" Option 1
    sl-radio value="2" Option 2
    sl-radio value="3" Option 3
  br
  sl-button[
    type="submit"
    variant="primary"
  ]
    | Submit

javascript:
  const form = document.querySelector(.validation);

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
    customElements.whenDefined('sl-radio-group'),
  ]).then(() => {
    // Handle form submit
    form.addEventListener(submit, event => {
      event.preventDefault();
      alert(All fields are valid!);
    });
  });

= ts_form_for ... do |f|
  = f.input :a,
    as: :radio_buttons,
    label: "Select an option",
    collection: [
        ["Option 1", "1"],
        ["Option 2", "2"],
        ["Option 3", "3"],
    ],
    wrapper_html: {
      required: true
    }
  br
  // ts_form_for automatically sets the form's submit button to variant="primary"
  = f.submit "Submit"

import SlButton from '@teamshares/shoelace/dist/react/button';
import SlIcon from '@teamshares/shoelace/dist/react/icon';
import SlRadio from '@teamshares/shoelace/dist/react/radio';
import SlRadioGroup from '@teamshares/shoelace/dist/react/radio-group';
const App = () => {
  function handleSubmit(event) {
    event.preventDefault();
    alert('All fields are valid!');
  }

  return (
    <form class="custom-validity" onSubmit={handleSubmit}>
      <SlRadioGroup label="Select an option" name="a" required onSlChange={handleChange}>
        <SlRadio value="1">
          Option 1
        </SlRadio>
        <SlRadiovalue="2">
          Option 2
        </SlRadio>
        <SlRadio value="3">
          Option 3
        </SlRadio>
      </SlRadioGroup>
      <br />
      <SlButton type="submit" variant="primary">
        Submit
      </SlButton>
    </form>
  );
};

Custom Validity

Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.

<form class="custom-validity">
  <sl-radio-group label="Select an option" name="a" value="1">
    <sl-radio value="1">Not me</sl-radio>
    <sl-radio value="2">Me neither</sl-radio>
    <sl-radio value="3">Choose me</sl-radio>
  </sl-radio-group>
  <br />
  <sl-button type="submit" variant="primary">Submit</sl-button>
</form>

<script type="module">
  const form = document.querySelector('.custom-validity');
  const radioGroup = form.querySelector('sl-radio-group');
  const errorMessage = 'You must choose the last option';

  // Set initial validity as soon as the element is defined
  customElements.whenDefined('sl-radio').then(() => {
    radioGroup.setCustomValidity(errorMessage);
  });

  // Update validity when a selection is made
  form.addEventListener('sl-change', () => {
    const isValid = radioGroup.value === '3';
    radioGroup.setCustomValidity(isValid ? '' : errorMessage);
  });

  await Promise.all([
    customElements.whenDefined('sl-radio-group'),
  ]).then(() => {
    // Handle form submit
    form.addEventListener('submit', event => {
      event.preventDefault();
      alert('All fields are valid!');
    });
  });
</script>

form.custom-validity
  sl-radio-group label="Select an option" name="a" value="1"
    sl-radio value="1" Not me
    sl-radio value="2" Me neither
    sl-radio value="3" Choose me
  br
  sl-button type="submit" variant="primary" Submit

javascript:
  const form = document.querySelector(.custom-validity);
  const radioGroup = form.querySelector(sl-radio-group);
  const errorMessage = You must choose the last option;

  // Set initial validity as soon as the element is defined
  customElements.whenDefined(sl-radio-group).then(() => {
    radioGroup.setCustomValidity(errorMessage);
  });

  // Update validity when a selection is made
  form.addEventListener(sl-change, () => {
    const isValid = radioGroup.value === 3;
    radioGroup.setCustomValidity(isValid ?  : errorMessage);
  });

  await Promise.all([
    customElements.whenDefined('sl-radio-group'),
  ]).then(() => {
    // Handle form submit
    form.addEventListener(submit, event => {
      event.preventDefault();
      alert(All fields are valid!);
    });
  });

Usage

When to Use a Radio Group

When you want people to choose just one option from a list
When presenting fewer than 7 options
If letting people see all their options right away (without an additional click) is a priority

When to Use Something Else

Use a checkbox group instead if presenting fewer than 5 to 7 options and you want to let people choose multiple options
Use a select instead if presenting more than 7 options or there isn’t enough room to present all the options

Labels, Help Text, Etc.

For additional guidelines on radio and radio group labels, help text, and the label tooltip, refer to the Input component usage guidelines

Testing

With Cypress

Adding data-test-id to a component

To test sl-radio-group, add the data-test-id attribute directly to the component. To test radio items in the group, add data-test-id to each item:

  sl-radio-group[
    label="Radio group text"
    name="input-name"
    value="option-1"
    data-test-id="radio-group-test"
  ] 
    sl-radio[
      value="option-1"
      data-test-id="item-test-1"
    ]
      | Option 1
    sl-radio[
      value="option-2"
      data-test-id="item-test-2"
    ] 
      | Option 2
    sl-radio[
      value="option-3" 
      data-test-id="item-test-3"
    ] 
      | Option 3

To test sl-radio-group implemented with ts_form_for, add data-test-id to wrapper_html. To test radio items in the group, add data-test-id to each item in the collection array:

    = ts_form_for ... do |f|
      = f.input :input_name,
        as: :radio_buttons,
        label: "Radio group text",
        collection: [
          ["Option 1", :option-1, data: { test_id: "item-test-1" }],
          ["Option 2", :option-2, data: { test_id: "item-test-2" }],
          ["Option 3", :option-3, data: { test_id: "item-test-3" }],
        ],
        wrapper_html: { 
          data: { 
            test_id: "radio-group-test"
          }
        }

Cypress commands for sl-radio-group

To select a radio item in the radio group:

  cy.get(`[data-test-id="item-test-1"]`).click();

To verify the radio group’s value, that a certain item is selected:

  cy.get(`[data-test-id="radio-group-test"]`).should("have.value", 'option-1');

To verify the radio group’s value, that a certain item is NOT selected:

  cy.get(`[data-test-id="radio-group-test"]`).should("not.have.value", "option-3");

Component Props

Note: The following appear as options in the Properties table but are currently not part of the Teamshares Design System. Please check with the design team before using these options:

Sizes small, large

Property	Default	Details
`label`	`''`	`string` The radio group’s label. Required for proper accessibility. If you need to display HTML, use the `label` slot instead.
`labelTooltip` `label-tooltip`	`''`	`string` Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.
`helpText` `help-text`	`''`	`string` The radio groups’s help text. If you need to display HTML, use the `help-text` slot instead.
`name`	`'option'`	`string` The name of the radio group, submitted as a name/value pair with form data.
`value`	`''`	`string` The current value of the radio group, submitted as a name/value pair with form data.
`size`	`'medium'`	`'small' \| 'medium' \| 'large'` The radio group’s size. This size will be applied to all child radios and radio buttons.
`horizontal`	`false`	`boolean` The radio group’s orientation. Changes the group’s layout from the default (vertical) to horizontal.
`contained`	`false`	`boolean` The radio group’s style. Changes the group’s style from the default (plain) style to the ‘contained’ style. This style will be applied to all child radios (but not child radio buttons, which do not have the ‘contained’ style as an option).
`form`	`''`	`string` By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.
`required`	`false`	`boolean` Ensures a child radio is checked before allowing the containing form to submit.
`validity`	—	— Gets the validity state object
`validationMessage`	—	— Gets the validation message
`updateComplete`		A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Slots

Name	Details
(default)	The default slot where `<sl-radio>` or `<sl-radio-button>` elements are placed.
`label`	The radio group’s label. Required for proper accessibility. Alternatively, you can use the `label` attribute.
`label-tooltip`	Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.
`help-text`	Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.

Learn more about using slots.

Events

Name	Name	Name	React Event	Details
`sl-change`	`sl-change`	`sl-change`	`onSlChange`	Emitted when the radio group’s selected value changes.
`sl-input`	`sl-input`	`sl-input`	`onSlInput`	Emitted when the radio group receives user input.
`sl-invalid`	`sl-invalid`	`sl-invalid`	`onSlInvalid`	Emitted when the form control has been checked for validity and its constraints aren’t satisfied.

Learn more about events.

Methods

Name	Details
`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()`	`message:` Sets a custom validation message. Pass an empty string to restore validity.

Learn more about methods.

CSS 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.
`button-group`	The button group that wraps radio buttons.
`button-group__base`	The button group’s `base` part.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<sl-button-group>

Examples

Basic Radio Group

Help Text

Label with Tooltip

Horizontal Radio Group

Contained Radio Group

Group with Segmented Controls

Disabling Options

Sizing Options

Validation

Custom Validity

Usage

When to Use a Radio Group

When to Use Something Else

Labels, Help Text, Etc.

Testing

With Cypress

Component Props

Slots

Events

Methods

CSS Parts

Dependencies