Radio

A radio field for single-choice form selections.

Install

Run the following command to install the radio component:

npx acc-nuxt add Radio

Examples

Default

With label

Choice card

Custom error

Loading

Disabled

Custom styling

Use the class prop to add a custom class to the radio wrapper. Then select the class inside the .lev-radio-wrapper to change the value of the CSS variables

Form

The radio component can be used in a form with vee-validate and zod.

Form Radio

Default values

Required

With Label component

Form values: { "theme": "dark", "delivery": "standard" } | Form errors: {}

Slots

The radio component provides the following slots for customization.

#skeleton
Slot for rendering a custom skeleton content while the radio is loading.
#icon
Slot for rendering a custom checked icon inside the radio.

Props

The radio component accepts the following props to customize its behavior.

disabled:boolean— optional
default:false
When true, the radio is disabled.
validate:boolean— optional
default:true
When true, uses vee-validate for form validation.
name:string— optional
default:undefined
The name attribute used for vee-validate field registration and radio grouping.
value:string | number | boolean
The selected value represented by this radio option.
loading:boolean— optional
default:false
When true, displays a skeleton state on the radio.
defaultError:string— optional
default:undefined
The default error message from vee-validate useField.
customError:boolean— optional
default:undefined
A custom error that applies error border styling to the radio.
disabledErrors:boolean— optional
default:false
When true, prevents validation error styling from being applied. The customError prop still applies error styling, as it is managed manually.

Emits

@change
Emitted when the radio becomes selected.

CSS Variables

The radio component can be customized using the following CSS variables.

--lev-radio-size
default:16px
Width and height of the radio.
--lev-radio-border
default:1px solid #d9d9d9
Border style of the radio.
--lev-radio-border-radius
default:50%
Border radius of the radio.
--lev-radio-bg
default:#ffffff
Background color of the radio.
--lev-radio-cursor
default:pointer
Cursor style when hovering over the radio.
--lev-radio-transition
default:border-color 100ms ease-out, background-color 100ms ease-out
Transition effects for the radio.
--lev-radio-error-border-color
default:#df3923
Border color when the radio has an error.
--lev-radio-disabled-bg
default:#d9d9d9
Background color when the radio is disabled.
--lev-radio-disabled-border-color
default:#d9d9d9
Border color when the radio is disabled.
--lev-radio-hover-border-color
default:#808080
Border color when hovering over the radio.
--lev-radio-focus-outline
default:1px solid #5298f5
Outline style when the radio is focused.
--lev-radio-focus-outline-offset
default:1px
Outline offset when the radio is focused.
--lev-radio-checked-icon-size
default:8px
Size of the checked icon inside the radio.
--lev-radio-checked-bg
default:#5298f5
Background color when the radio is checked.
--lev-radio-checked-border-color
default:#5298f5
Border color when the radio is checked.
--lev-radio-checked-disabled-bg
default:#a0c4f5
Background color when the radio is checked and disabled.
--lev-radio-checked-disabled-border-color
default:#a0c4f5
Border color when the radio is checked and disabled.
--lev-radio-checked-hover-bg
default:#2260a0
Background color when hovering over a checked radio.
--lev-radio-checked-hover-border-color
default:#2260a0
Border color when hovering over a checked radio.
--lev-radio-dot-bg
default:#ffffff
Background color of the inner checked dot.

On This Page