Radio
A radio field for single-choice form selections.
Install
Run the following command to install the radio component:
npx acc-nuxt add RadioExamples
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: {}
Props
The radio component accepts the following props to customize its behavior.
disabled:boolean— optional
default:false
When true, the radio is disabled.
autocomplete:string— optional
default:undefined
The native autocomplete hint for the radio input.
size:string— optional
default:md
Visual size of the radio. The copied wrapper supports sm, md, and lg.
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:false
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.
Bindings
v-model:AccRadioValue | undefined
Controls the selected radio value.
Emits
@update:modelValue
Emitted when the selected radio value changes.
@change
Emitted when the radio becomes selected.
Slots
The radio component provides the following slots for customization.
#icon="{ checked: boolean }"
Slot for rendering a custom checked icon inside the radio.
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 #c3c6c7
Border style of the radio.
--lev-radio-border-radius
default:9999px
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:#ef4444
Border color when the radio has an error.
--lev-radio-disabled-bg
default:#f0f1f2
Background color when the radio is disabled.
--lev-radio-disabled-border-color
default:#e1e4e5
Border color when the radio is disabled.
--lev-radio-hover-border-color
default:#aaacad
Border color when hovering over the radio.
--lev-radio-focus-outline
default:1px solid #1d66bf
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:#1d66bf
Background color when the radio is checked.
--lev-radio-checked-border-color
default:#1d66bf
Border color when the radio is checked.
--lev-radio-checked-disabled-bg
default:#a5c2e5
Background color when the radio is checked and disabled.
--lev-radio-checked-disabled-border-color
default:#a5c2e5
Border color when the radio is checked and disabled.
--lev-radio-checked-hover-bg
default:#175299
Background color when hovering over a checked radio.
--lev-radio-checked-hover-border-color
default:#175299
Border color when hovering over a checked radio.
--lev-radio-dot-bg
default:#ffffff
Background color of the inner checked dot.
Wrapper configuration
allowedSizes:readonly string[]
default:['sm', 'md', 'lg']
Sizes exposed by the copied playground wrapper.