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.
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.
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.
Selection: [none]
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.