Skip to main content
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>
);

Label with Tooltip

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

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.

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

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.

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.

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

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.

Option 1 Option 2 Option 3
Submit
<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.

Not me Me neither Choose me
Submit
<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.

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

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>