GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Radios
<gcds-radios>

Also called: radio button, radio. Radios provide a set of options for a single response.
  • GitHub
  • Figma

Radios component preview

On this page

Coding and accessibility for radios

Apply required attributes

Always use the following required attributes with gcds-radios:
  • name
  • legend
  • options

Use the options attribute

  • The options attribute uses an array of objects to render each radio button.
  • Within the options attribute of each radio button, always use the object’s required properties:
    • id  
    • label
  • The rest of the properties are optional.
Example: 
{
  'id'!: '',
  'label'!: '',
  'value'!: '',
  'checked'?: '',
  'hint'?: '',
}

Use the value attribute

The value attribute provides a quick reference of the value selected inside the gcds-radios component.

Add hint text

Use the hint attribute to add hint text. Add validation and error messages
  • Use the required attribute to activate the built-in error messages and validation for radios.
  • Fields with specific input requirements will validate if the entry is invalid, even if it is not required.
  • For optional fields that need validation, like email address formats, add custom validation with a custom error message.

Examples

Explore the different ways you can configure the component. Each example shows a working implementation and ready-to-copy code.

In this section

Essential attributes

These attributes are needed for the component to function correctly.

legend

The legend attribute defines the legend for a group of radios. 
<gcds-radios
legend="Legend"
name="radio"
options='[
  {"id":"form-radio-1","label":"Label 1","hint":"Description or example to make the option clearer", "value": "radio1"},
  {"id":"form-radio-r","label":"Label 2","hint":"Description or example to make the option clearer", "value": "radio2"}
]'>
</gcds-radios>

name

The name attribute identifies the radios component within a form. It is used to reference the component after a form is submitted. 
<gcds-radios
legend="Legend"
name="radio"
options='[
  {"id":"form-radio-1","label":"Label 1","hint":"Description or example to make the option clearer", "value": "radio1"},
  {"id":"form-radio-r","label":"Label 2","hint":"Description or example to make the option clearer", "value": "radio2"}
]'>
</gcds-radios>

options

The options attribute defines the radios to render by taking an array of objects, one per radio button. 
<gcds-radios
legend="Legend"
name="radio"
options='[
  {"id":"form-radio-1","label":"Label 1","hint":"Description or example to make the option clearer", "value": "radio1"},
  {"id":"form-radio-r","label":"Label 2","hint":"Description or example to make the option clearer", "value": "radio2"}
]'>
</gcds-radios>

Optional attributes

These attributes allow you to customize or extend the component’s behaviour and presentation.

autofocus

The autofocus attribute controls whether the first radio button will be focused automatically when the page loads. By default, it is set to false. When set to true, the radio button is focused on render. 
<gcds-radios
autofocus
legend="Legend"
name="radio"
options='[
  {"id":"form-radio-1","label":"Label 1","hint":"Description or example to make the option clearer", "value": "radio1"},
  {"id":"form-radio-r","label":"Label 2","hint":"Description or example to make the option clearer", "value": "radio2"}
]'>
</gcds-radios>

disabled

The disabled attribute controls whether the radios are disabled or not. By default, it is set to false. 
<gcds-radios
disabled
legend="Legend"
name="radio"
options='[
  {"id":"form-radio-1","label":"Label 1","hint":"Description or example to make the option clearer", "value": "radio1"},
  {"id":"form-radio-r","label":"Label 2","hint":"Description or example to make the option clearer", "value": "radio2"}
]'>
</gcds-radios>

error-message

The error-message attribute defines the error message to display for invalid radios. 
<gcds-radios
error-message="Error message"
legend="Legend"
name="radio"
options='[
  {"id":"form-radio-1","label":"Label 1","hint":"Description or example to make the option clearer", "value": "radio1"},
  {"id":"form-radio-r","label":"Label 2","hint":"Description or example to make the option clearer", "value": "radio2"}
]'>
</gcds-radios>

form

The form attribute specifies the ID of the form that the radios belong to. 
<gcds-radios
form="form-id"
legend="Legend"
name="radio"
options='[
  {"id":"form-radio-1","label":"Label 1","hint":"Description or example to make the option clearer", "value": "radio1"},
  {"id":"form-radio-r","label":"Label 2","hint":"Description or example to make the option clearer", "value": "radio2"}
]'>
</gcds-radios>

hide-legend

The hide-legend attribute controls whether the legend is hidden or not. 
<gcds-radios
hide-legend
legend="Legend"
name="radio"
options='[
  {"id":"form-radio-1","label":"Label 1","hint":"Description or example to make the option clearer", "value": "radio1"},
  {"id":"form-radio-r","label":"Label 2","hint":"Description or example to make the option clearer", "value": "radio2"}
]'>
</gcds-radios>

hint

The hint attribute defines the hint text displayed under the label or legend. 
<gcds-radios
hint="Hint / Example message."
legend="Legend"
name="radio"
options='[
  {"id":"form-radio-1","label":"Label 1","hint":"Description or example to make the option clearer", "value": "radio1"},
  {"id":"form-radio-r","label":"Label 2","hint":"Description or example to make the option clearer", "value": "radio2"}
]'>
</gcds-radios>

required

The required attribute controls whether the radio fieldset is required or not. When set to true, it adds “required” after the legend, and activates the required validator. 
<gcds-radios
required
legend="Legend"
name="radio"
options='[
  {"id":"form-radio-1","label":"Label 1","hint":"Description or example to make the option clearer", "value": "radio1"},
  {"id":"form-radio-r","label":"Label 2","hint":"Description or example to make the option clearer", "value": "radio2"}
]'>
</gcds-radios>

validate-on

The validate-on attribute defines the validation event for the radios. 
<gcds-radios
validate-on="other"
required
legend="Legend"
name="radio"
options='[
  {"id":"form-radio-1","label":"Label 1","hint":"Description or example to make the option clearer", "value": "radio1"},
  {"id":"form-radio-r","label":"Label 2","hint":"Description or example to make the option clearer", "value": "radio2"}
]'>
</gcds-radios>

value

The value attribute contains the value of the currently selected radio button. It updates when the selection changes. 
<gcds-radios
value="radio1"
legend="Legend"
name="radio"
options='[
  {"id":"form-radio-1","label":"Label 1","hint":"Description or example to make the option clearer", "value": "radio1"},
  {"id":"form-radio-r","label":"Label 2","hint":"Description or example to make the option clearer", "value": "radio2"}
]'>
</gcds-radios>
Code builder Generate an instance of the component you need by selecting its code properties.
  • Explore by choosing different code values to generate the instance you want.
  • Get the code and pull it into your environment.
  • Add any copy you need to the component (like text for a label).
Note: The code builder uses English for all code elements, which follows standard practice.
Help us improve Have questions or a request? Give feedback on our contact form. Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others. Give feedback Report an issue on GitHub
2025-06-10