Components

RadioGroupField

Form field component for selecting options using a group of radio buttons.

Component

View code

Show playground

Label (optional)

Option 1

Option 2

Option 3

Select one of the options.

Props

Props	Required	Default	Type
`name`	`true`	—	`string`
`label`	—	—	`string`
`options`	`true`	—	`RadioOption[]`
`modelValue`	`true`	—	`string \| number \| boolean \| null`
`validator`	—	`null`	`(value: unknown) => string \| null`
`error`	—	`''`	`string`
`type`	—	`'default'`	`RadioType`
`required`	—	`false`	`boolean`
`showOptionalLabel`	—	`true`	`boolean`
`optionalLabel`	—	—	`string`
`disabled`	—	`false`	`boolean`
`helpText`	—	—	`string`
`inverse`	—	`false`	`boolean`
`size`	—	`ControlFieldSize.MD`	`ControlFieldSize`
`helpTextPosition`	—	`Position.BOTTOM`	`Position`
`orientation`	—	`'vertical'`	`Orientation`
`showDivider`	—	`false`	`boolean`

Usage

name

Sets the name of the radio button group.

 <template>
    <RadioGroupField name="radio-group" />
</template>

label

Sets the label of the field.

 <template>
    <RadioGroupField label="Label text" />
</template>

Type: string

Options

Sets the options for the radio buttons.

 <template>
    <RadioGroupField 
        :options="exampleOptions" 
    />
</template>
<script setup lang="ts">
const exampleOptions: RadioOption[] = [
    { id: 'option1', value: 'option1', label: 'Option 1' },
    { id: 'option2', value: 'option2', label: 'Option 2' },
    { id: 'option3', value: 'option3', label: 'Option 3' },
]
</script>

Type: RadioOption[]
Required: true

TypeScript interface

 interface RadioOption {
    id: string | number
    value: string | number | boolean
    label?: string
    ariaLabel?: string
    helpText?: string
    disabled?: boolean
    type?: ColorAccent.INFO | ColorAccent.SUCCESS | ColorAccent.DANGER | ColorAccent.PRIMARY_BRAND | ColorAccent.SECONDARY_BRAND
    icon?: string
}

Accessibility

If an option hides its visual label (for example, `label: ''`), provide `ariaLabel` so screen readers still announce an accessible name.

 <script setup lang="ts">
const exampleOptions: RadioOption[] = [
    { id: 'icon-only', value: 'icon-only', label: '', ariaLabel: 'Icon only option' },
    { id: 'with-label', value: 'with-label', label: 'Option with label' },
]
</script>

modelValue

Sets the selected value of the radio button group.

 <template>
    <RadioGroupField 
        v-model="selectedValue" 
        :options="exampleOptions" 
    />
</template>
<script setup lang="ts">
const selectedValue = ref<string | number | boolean | null>(null)
const exampleOptions: RadioOption[] = [
    { id: 'option1', value: 'option1', label: 'Option 1' },
    { id: 'option2', value: 'option2', label: 'Option 2' },
    { id: 'option3', value: 'option3', label: 'Option 3' },
]
</script>

Type: string | number | boolean | null
Required: true

validator

Sets the validator function for the field, which controls its internal validation state.

It can use the following validations utilities:

validateField
validateBooleanField

 <template>
    <RadioGroupField :validator="validateField" />
</template>

Type: function
Default: null

error (v-model:error)

Sets the error message of the field. This prop is bindable via v-model:error, allowing two-way syncing of the validation state.

 <template>
    <RadioGroupField v-model:error="errorMessage" />
</template>

Type: string
Default: ''

type

Sets the style type of the radio buttons.

 <template>
    <RadioGroupField :type="RadioType.BUTTON" />
</template>

Type: RadioType
Default: RadioType.DEFAULT

Options

Value	Description
`DEFAULT`	Uses the default radio button style.
`BUTTON`	Uses the button type for radio buttons with icons and boxed style.

required

Sets whether the field is required.

 <template>
    <RadioGroupField required />
</template>

Type: boolean
Default: false

showOptionalLabel

When the field is not required, shows an "(optional)" hint next to the label. Set to false to hide it. The hint text defaults to a global setting that can be overridden project-wide, and can also be overridden per field with the optionalLabel prop.

 <template>
    <RadioGroupField label="Plan" :showOptionalLabel="false" />
</template>

Type: boolean
Default: true

optionalLabel

Overrides the "(optional)" hint text for this specific field, taking priority over the global default.

 <template>
    <RadioGroupField label="Plan" optionalLabel="(not required)" />
</template>

Type: string

disabled

Sets whether the field is disabled.

Important

Each radio option can also be individually disabled by setting the `disabled` property on the option object. If the `disabled` prop is set on the `RadioGroupField`, it will override the individual option settings and disable all options.

 <template>
    <RadioGroupField disabled />
</template>

Type: boolean
Default: false

helpText

Sets the help text of the field.

 
<template>
    <RadioGroupField helpText="This is some help text." />
</template>

Type: string

inverse

Sets whether the radio button is displayed on the right side of the text.

Important

This prop is only applicable when the `type` prop is set to `RadioType.DEFAULT`.

 <template>
    <RadioGroupField inverse />
</template>

Type: boolean
Default: false

size

Sets the size of the radio options in the group. It uses the ControlFieldSize enum.

 <template>
    <RadioGroupField :size="ControlFieldSize.LG" />
</template>

Type: ControlFieldSize
Default: ControlFieldSize.MD

Options

Value	Description
`XS`	Extra Small
`SM`	Small
`MD`	Medium
`LG`	Large

orientation

Sets the orientation of the radio buttons.

 <template>
    <RadioGroupField orientation="Orientation.VERTICAL" />
</template>

Type: Orientation
Default: Orientation.VERTICAL

Options

Value	Description
`VERTICAL`	Radio options are displayed vertically.
`HORIZONTAL`	Radio options are displayed in a two-column grid.

showDivider

Shows a divider line between consecutive options.

Important

This prop is only applicable when the `type` prop is set to `RadioType.DEFAULT`.

 <template>
    <RadioGroupField showDivider />
</template>

Type: boolean
Default: false

helpTextPosition

Sets the position of the help text relative to the field group.

 <template>
    <RadioGroupField helpTextPosition="top" helpText="Appears above the options" />
</template>

Type: Position
Default: Position.BOTTOM

Options

Value	Description
`TOP`	Help text is displayed above the options.
`BOTTOM`	Help text is displayed below the options.