Radio button

Skip to page content

BETA

Component demo

Interactive example

Add a free purchase with any hot drink

Crisps

Deluxe chocolate chip cookie (sold out)

Banana

No thanks, just my coffee

Web component

React

<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	false
Property helperText Attribute helper-text	The helper text that will be displayed for additional field guidance. type: string
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	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"	"vertical"
Property required Attribute required	If`true` , the radio group will require a value. type: boolean	false
Property size Attribute size	The size of the radio group component. type: IcSizesNoLarge - "medium" \| "small"	"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"	"inherit"
Property validationStatus Attribute validation-status	The validation status - e.g. 'error' \| 'warning' \| 'success'. type: IcInformationStatusOrEmpty - "" \| "error" \| "success" \| "warning"	""
Property validationText Attribute validation-text	The validation text - e.g. 'error' \| 'warning' \| 'success'. type: string	""

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

Default: false

Property

helperText

Attribute

helper-text

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

type: string

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

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"

Default: "vertical"

Property

required

Attribute

required

Iftrue , the radio group will require a value.

type: boolean

Default: false

Property

size

Attribute

size

The size of the radio group component.

type: IcSizesNoLarge - "medium" | "small"

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"

Default: "inherit"

Property

validationStatus

Attribute

validation-status

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

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

Default: ""

Property

validationText

Attribute

validation-text

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

type: string

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"	"static"
Property disabled Attribute disabled	If`true` , the disabled state will be set. type: boolean	false
Property dynamicText Attribute dynamic-text	The text to be displayed when dynamic. type: string	"This selection requires additional answers"
Property form Attribute form	The <form> element to associate the radio with. type: string
Property groupLabel Attribute group-label	The group label for the radio option. type: string
Property label Attribute label	The label for the radio option. type: string
Property name Attribute name	The name for the radio option. type: string
Property selected Attribute selected	If`true` , the radio option will be displayed in a selected state. type: boolean	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"	"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"

Default: "static"

Property

disabled

Attribute

disabled

Iftrue , the disabled state will be set.

type: boolean

Default: false

Property

dynamicText

Attribute

dynamic-text

The text to be displayed when dynamic.

type: string

Default: "This selection requires additional answers"

Property

form

Attribute

form

The <form> element to associate the radio with.

type: string

Property

groupLabel

Attribute

group-label

The group label for the radio option.

type: string

Property

label

Attribute

label

The label for the radio option.

type: string

Property

name

Attribute

name

The name for the radio option.

type: string

Property

selected

Attribute

selected

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

type: boolean

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"

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

Do you have any special requests?

Yes, I want to modify my order

No, standard please

Web component

React

<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

Do you have any special requests?

Yes, I want to modify my order

No, standard please

Web component

React

<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

Do you have any special requests?

Let us know if you'd like an alternative to dairy milk.

Yes, I want to modify my order

No, standard please

Web component

React

<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

Do you have any special requests?

Yes, I want to modify my order

No, standard please

Web component

React

<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

Do you have any special requests? *

Yes, I want to modify my order

No, standard please

An answer to this question is required

Web component

React

<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

Add a free purchase with any hot drink

Crisps

Deluxe chocolate chip cookie (sold out)

Banana

No thanks, just my coffee

Web component

React

<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 .