Preview

Usage

<cs-radio-group id="my-radios" value="first"></cs-radio-group>
<script>
  document.getElementById('my-radios').items = [
    { value: 'first', label: 'First option' },
    { value: 'second', label: 'Second option' },
    { value: 'third', label: 'Third option' },
  ];
</script>

Properties

aria-controlsstring

Adds aria-controls attribute to the radio group. If the radio group controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.

aria-labelstring

Adds aria-label to the group. If you are using this form element within a form field, don't set this property because the form field component automatically sets the correct labels to make the component accessible.

aria-requiredboolean

Adds aria-required to the group.

control-idstring

direction'horizontal' | 'vertical' default: 'vertical'

Defines the direction in which the radio buttons are laid out.

itemsReadonlyArray<RadioGroupProps.RadioButtonDefinition> default: []

Specifies an array of radio buttons to display. Each of these objects have the following properties:

• value (string) - Sets the value of the radio button. Assigned to the radio group when a user selects the radio button.
• label (unknown) - Specifies a label for the radio button.
• description (unknown) - (Optional) Specifies descriptive text that appears below the label.
• disabled (boolean) - (Optional) Determines whether the radio button is disabled, which prevents the user from selecting it.
• controlId (string) - (Optional) Sets the ID of the internal input. You can use it to relate a label element's for attribute to this control. In general it's not recommended to set this because the ID is automatically set by the radio group component.

namestring

Specify a custom name for the radio buttons. If not provided, the radio group generates a random name.

read-onlyboolean default: false

Specifies if the whole group is read-only, which prevents the user from modifying the value, but does not prevent the value from being included in a form submission. A read-only control is still focusable.

valuestring | nullrequired

Sets the value of the selected radio button. If you want to clear the selection, use null.

Events

changeCustomEvent<RadioGroupProps.ChangeDetail>

Called when the user selects a different radio button. The event detail contains the current value.