Radio button - Intelligence Community Design System

Skip to page content

Show navigation section

Component demo

Interactive example

Crisps

Deluxe chocolate chip cookie (sold out)

Banana

No thanks, just my coffee

Web component

React

Show full code

<ic-radio-group
name="radio-group-1"
label="Add a free purchase with any hot drink"
>
<ic-radio-optionvalue="crisps"label="Crisps"></ic-radio-option>
<ic-radio-option
value="cookie"
label="Deluxe chocolate chip cookie (sold out)"
disabled="true"
>
</ic-radio-option>
<ic-radio-optionvalue="fruit"label="Banana"></ic-radio-option>
<ic-radio-option
value="No item"
label="No thanks, just my coffee"
></ic-radio-option>
</ic-radio-group>

<IcRadioGroupname='radio-group-1'label="Add a free purchase with any hot drink"onIcChange={(ev)=>console.log(ev.detail.value)}>
<IcRadioOptionvalue="crisps"label="Crisps"/>
<IcRadioOption
value="cookie"
label="Deluxe chocolate chip cookie (sold out)"
disabled
/>
<IcRadioOptionvalue="fruit"label="Banana"/>
<IcRadioOptionvalue="No item"label="No thanks, just my coffee"/>
</IcRadioGroup>

Radio group details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property label Attribute label	The label for the radio group to be displayed. Required type: string
Property name Attribute name	The name for the radio group to differentiate from other groups. Required type: string
Property disabled Attribute disabled	If`true` , the disabled state will be set. type: boolean - boolean \| undefined	false
Property helperText Attribute helper-text	The helper text that will be displayed for additional field guidance. type: string - string \| undefined
Property hideLabel Attribute hide-label	If`true` , the label will be hidden and the required label value will be applied as an aria-label. type: boolean - boolean \| undefined	false
Property orientation Attribute orientation	The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the`additional-field` slot, then the orientation will always be vertical. type: IcOrientation - "horizontal" \| "vertical" \| undefined	"vertical"
Property required Attribute required	If`true` , the radio group will require a value. type: boolean - boolean \| undefined	false
Property size Attribute size	The size of the radio group component. type: IcSizesNoLarge - "medium" \| "small" \| undefined	"medium"
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"
Property validationStatus Attribute validation-status	The validation status - e.g. 'error' \| 'warning' \| 'success'. type: IcInformationStatusOrEmpty - "" \| "error" \| "success" \| "warning" \| undefined	""
Property validationText Attribute validation-text	The validation text - e.g. 'error' \| 'warning' \| 'success'. type: string - string \| undefined	""

Property

label

Attribute

label

The label for the radio group to be displayed.

Required

type: string

Property

name

Attribute

name

The name for the radio group to differentiate from other groups.

Required

type: string

Property

disabled

Attribute

disabled

Iftrue , the disabled state will be set.

type: boolean - boolean | undefined

Default: false

Property

helperText

Attribute

helper-text

The helper text that will be displayed for additional field guidance.

type: string - string | undefined

Property

hideLabel

Attribute

hide-label

Iftrue , the label will be hidden and the required label value will be applied as an aria-label.

type: boolean - boolean | undefined

Default: false

Property

orientation

Attribute

orientation

The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use theadditional-field slot, then the orientation will always be vertical.

type: IcOrientation - "horizontal" | "vertical" | undefined

Default: "vertical"

Property

required

Attribute

required

Iftrue , the radio group will require a value.

type: boolean - boolean | undefined

Default: false

Property

size

Attribute

size

The size of the radio group component.

type: IcSizesNoLarge - "medium" | "small" | undefined

Default: "medium"

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined

Default: "inherit"

Property

validationStatus

Attribute

validation-status

The validation status - e.g. 'error' | 'warning' | 'success'.

type: IcInformationStatusOrEmpty - "" | "error" | "success" | "warning" | undefined

Default: ""

Property

validationText

Attribute

validation-text

The validation text - e.g. 'error' | 'warning' | 'success'.

type: string - string | undefined

Default: ""

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icChange React onIcChange	Emitted when a user selects a radio.	IcChangeEventDetail

Web component

icChange

React

onIcChange

Emitted when a user selects a radio.

IcChangeEventDetail

Radio option details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property value Attribute value	The value for the radio option. Required type: string
Property additionalFieldDisplay Attribute additional-field-display	The style of additionalField that will be displayed if used. type: IcAdditionalFieldTypes - "dynamic" \| "static" \| undefined	"static"
Property disabled Attribute disabled	If`true` , the disabled state will be set. type: boolean - boolean \| undefined	false
Property dynamicText Attribute dynamic-text	The text to be displayed when dynamic. type: string - string \| undefined	"This selection requires additional answers"
Property form Attribute form	The <form> element to associate the radio with. type: string - string \| undefined
Property groupLabel Attribute group-label	The group label for the radio option. type: string - string \| undefined
Property label Attribute label	The label for the radio option. type: string - string \| undefined
Property name Attribute name	The name for the radio option. type: string - string \| undefined
Property selected Attribute selected	If`true` , the radio option will be displayed in a selected state. type: boolean - boolean \| undefined	false
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"

Property

value

Attribute

value

The value for the radio option.

Required

type: string

Property

additionalFieldDisplay

Attribute

additional-field-display

The style of additionalField that will be displayed if used.

type: IcAdditionalFieldTypes - "dynamic" | "static" | undefined

Default: "static"

Property

disabled

Attribute

disabled

Iftrue , the disabled state will be set.

type: boolean - boolean | undefined

Default: false

Property

dynamicText

Attribute

dynamic-text

The text to be displayed when dynamic.

type: string - string | undefined

Default: "This selection requires additional answers"

Property

form

Attribute

form

The <form> element to associate the radio with.

type: string - string | undefined

Property

groupLabel

Attribute

group-label

The group label for the radio option.

type: string - string | undefined

Property

label

Attribute

label

The label for the radio option.

type: string - string | undefined

Property

name

Attribute

name

The name for the radio option.

type: string - string | undefined

Property

selected

Attribute

selected

Iftrue , the radio option will be displayed in a selected state.

type: boolean - boolean | undefined

Default: false

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined

Default: "inherit"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot additional-field	Content to displayed alongside a radio option.

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icCheck React onIcCheck	Emitted when the radio option is selected.	IcValueEventDetail
Web component icSelectedChange React onIcSelectedChange	Emitted when the radio option is selected or deselected.	void

Web component

icCheck

React

onIcCheck

Emitted when the radio option is selected.

IcValueEventDetail

Web component

icSelectedChange

React

onIcSelectedChange

Emitted when the radio option is selected or deselected.

void

Methods

Name	Description	Signature
Method setFocus	Sets focus on the radio option.	setFocus() => Promise<void>

Method

setFocus

Sets focus on the radio option.

setFocus() => Promise<void>

Variants

Conditional

Interactive example

Yes, I want to modify my order

No, standard please

Web component

React

Show full code

<ic-radio-group
name="radio-group-2"
label="Do you have any special requests?"
>
<ic-radio-optionvalue="request"label="Yes, I want to modify my order">
<ic-text-field
slot="additional-field"
label="Please provide some additional information"
placeholder="i.e Soya milk please"
>
</ic-text-field>
</ic-radio-option>
<ic-radio-option
value="none"
label="No, standard please"
></ic-radio-option>
</ic-radio-group>

<IcRadioGroup
label="Do you have any special requests?"
name="radio-group-2"
>
<IcRadioOptionvalue="request"label="Yes, I want to modify my order">
<IcTextField
slot="additional-field"
label="Please provide some additional information"
placeholder="i.e Soya milk please"
/>
</IcRadioOption>
<IcRadioOption
value="none"
label="No, standard please"
/>
</IcRadioGroup>

Conditional dynamic

Interactive example

Yes, I want to modify my order

No, standard please

Web component

React

Show full code

<ic-radio-group
name="radio-group-3"
label="Do you have any special requests?"
>
<ic-radio-option
value="request"
label="Yes, I want to modify my order"
additional-field-display="dynamic"
>
<ic-text-field
slot="additional-field"
label="Please provide some additional information"
placeholder="i.e Soya milk please"
>
</ic-text-field>
</ic-radio-option>
<ic-radio-option
value="none"
label="No, standard please"
></ic-radio-option>
</ic-radio-group>

<IcRadioGroup
name="radio-group-3"
label="Do you have any special requests?"
>
<IcRadioOption
value="request"
label="Yes, I want to modify my order"
additionalFieldDisplay="dynamic"
>
<IcTextField
slot="additional-field"
label="Please provide some additional information"
placeholder="i.e Soya milk please"
/>
</IcRadioOption>
<IcRadioOptionvalue="none"label="No, standard please"/>
</IcRadioGroup>

With helper text

Interactive example

Yes, I want to modify my order

No, standard please

Web component

React

Show full code

<ic-radio-group
label="Do you have any special requests?"
helper-text="Let us know if you'd like an alternative to dairy milk."
name="radio-group-4"
>
<ic-radio-option
value="request"
label="Yes, I want to modify my order"
></ic-radio-option>
<ic-radio-option
value="none"
label="No, standard please"
></ic-radio-option>
</ic-radio-group>

<IcRadioGroup
label="Do you have any special requests?"
helperText="Let us know if you'd like an alternative to dairy milk."
name='radio-group-4'
>
<IcRadioOptionvalue="request"label="Yes, I want to modify my order"/>
<IcRadioOptionvalue="none"label="No, standard please"/>
</IcRadioGroup>

Size small

Interactive example

Yes, I want to modify my order

No, standard please

Web component

React

Show full code

<ic-radio-group
label="Do you have any special requests?"
name="radio-group-5"
size="small"
>
<ic-radio-option
value="request"
label="Yes, I want to modify my order"
></ic-radio-option>
<ic-radio-option
value="none"
label="No, standard please"
></ic-radio-option>
</ic-radio-group>

<IcRadioGroup
label="Do you have any special requests?"
name="radio-group-5"
size="small"
>
<IcRadioOptionvalue="request"label="Yes, I want to modify my order"/>
<IcRadioOptionvalue="none"label="No, standard please"/>
</IcRadioGroup>

With validation

Interactive example

Yes, I want to modify my order

No, standard please

Web component

React

Show full code

<ic-radio-group
name="radio-group-6"
label="Do you have any special requests?"
validation-status="error"
validation-text="An answer to this question is required"
required="true"
>
<ic-radio-option
value="request"
label="Yes, I want to modify my order"
></ic-radio-option>
<ic-radio-option
value="none"
label="No, standard please"
></ic-radio-option>
</ic-radio-group>

<IcRadioGroup
name="radio-group-6"
label="Do you have any special requests?"
validationStatus="error"
validationText="An answer to this question is required"
required
>
<IcRadioOptionvalue="request"label="Yes, I want to modify my order"/>
<IcRadioOptionvalue="none"label="No, standard please"/>
</IcRadioGroup>

Theme

Interactive example

Crisps

Deluxe chocolate chip cookie (sold out)

Banana

No thanks, just my coffee

Web component

React

Show full code

<ic-radio-group
name="radio-group-1"
label="Add a free purchase with any hot drink"
theme="dark"
>
<ic-radio-optionvalue="crisps"label="Crisps"></ic-radio-option>
<ic-radio-option
value="cookie"
label="Deluxe chocolate chip cookie (sold out)"
disabled="true"
>
</ic-radio-option>
<ic-radio-optionvalue="fruit"label="Banana"></ic-radio-option>
<ic-radio-option
value="No item"
label="No thanks, just my coffee"
></ic-radio-option>
</ic-radio-group>

<IcRadioGroup
name='radio-group-1'
label="Add a free purchase with any hot drink"
theme="dark"
>
<IcRadioOptionvalue="crisps"label="Crisps"/>
<IcRadioOption
value="cookie"
label="Deluxe chocolate chip cookie (sold out)"
disabled
/>
<IcRadioOptionvalue="fruit"label="Banana"/>
<IcRadioOptionvalue="No item"label="No thanks, just my coffee"/>
</IcRadioGroup>

Last reviewed 31 May 2024 .