Radio cards

Radio card

Default

Responsive font sizing is applied by default. This means the text will be smaller on mobile and larger on desktop.

What type of property do you want quotes for?

Selection: [none]

Custom card styling

This example demonstrates customizing the content, spacing, and typography of the cards, as well as changing the layout based on the breakpoint.

What’s the main reason you want a battery?

Selection: [none]

Detached label

This example demonstrates a case where more control is needed over the position of the field label on the desktop breakpoint, so it is rendered separately of the radio cards component. We do still need to pass the label text into the radio cards component for accessibility purposes, but hide it visually by passing in a prop.

What’s your timeline for installing heat pumps?

Selection: [none]

Passing options

Passing Options

Selection: first

EsFormRadioCards props

Name
id
Type
String
Default
n/a
Description
Required.
Name
label
Type
String
Default
n/a
Description
Required.
Name
name
Type
String
Default
''
Description
Optional.
Name
options
Type
Array
Default
undefined
Description
Optional. Alternative to creating an es-form-radio-card in the default slot.
Name
inline
Type
Boolean
Default
false
Description
Optional.
Name
v-model
Type
Any
Default
undefined
Description
Optional. Required, only if passing the options prop
Name
hasIcon
Type
Boolean
Default
false
Description
Optional. Adds a "has-icon" class to the radiogroup
Name
labelClass
Type
String
Default
''
Description
Optional. Apply class to the input label. Defaults to "font-size-h3"
Name
labelSrOnly
Type
Boolean
Default
false
Description
Optional. Applies an `sr-only` class to the label

EsFormRadioCard props

Name
id
Type
String
Default
n/a
Description
Required.
Name
name
Type
String
Default
n/a
Description
Required. Name of radio group
Name
value
Type
Any
Default
n/a
Description
Required. Value of radio button
Name
disabled
Type
Boolean
Default
false
Description
Optional. When present, it specifies that the radio button should be disabled.
Name
inline
Type
Boolean
Default
false
Description
Optional. When present, it specifies that the radio buttons should be displayed inline.
Name
displayName
Type
String
Default
''
Description
Optional. Required, if not using the default slot. The text to display next to the radio button.
Name
v-model
Type
Any
Default
n/a
Description
Required.

Migrating from ESDS 2.0 form radio cards

The previous radio card and radio card group components were based on bootstrap-vue 's implementation.

Going forward the v-model should be on the radio card group component when passing in the options prop.

When using the radio card group's default slot the v-model should be on the radio card components within that slot.