Vivid Logo Vivid

Radio Group

A radio group is a collection of Radio buttons where only one choice can be selected.

For Radio buttons to function correctly they must be slotted inside Radio Group component.

Labelling

Radio Label Text

Use the label attribute to provide a visible label for the Radio.

Radio Group Label Text

Use the label to set the Radio Group label.

If a visible label can't be used, provide one using the aria-label attribute. This ensures screen readers announce the purpose of the element, making it accessible to all users.

Helper Text

The helper-text attribute provides additional information to help the user enter the correct information.

To add HTML to the helper text, use the helper-text slot.

Error Text

The error-text attribute provides a custom error message.

Orientation

Set the orientation member to set the orientation (horizontal or vertical) of the radio-group.

  • Type: horizontal | vertical
  • Default: horizontal

Connotation

Use the connotation attribute to set the Radio color.

States

Checked

Use the checked on the Radio to mark the radio as selected.

In Vue, the equivalent of the checked attribute is default-checked.

Disabled

Set the disabled attribute on a single Radio button.

Set the disabled attribute to disable all radio buttons in the Radio Group.

Readonly

Set the readonly attribute to specify that the Radio Group is read-only.
A read-only radio-group cannot be modified but can be focused and tabbed into.
Radio can not have a read-only state.