Radio

npm install @vrembem/radio

@use "@vrembem/radio";

Options

Radio uses design token CSS variables in a reference and fallback pattern. Variables are referenced in the component's styles but are not directly defined; instead, they are provided with sensible fallbacks.

--vb-radio-color

var(--vb-form-control-choice-color)

--vb-radio-accent

var(--vb-form-control-choice-accent)

--vb-radio-fill

var(--vb-form-control-choice-fill)

--vb-radio-size

var(--vb-form-control-size)

--vb-radio-border-width

2px

--vb-radio-dot-size

0.5em

Basic usage

Radio form controls are composed using the <input type="radio"> element along with the .radio class.

<input class="radio" type="radio" />

Labels

For radio buttons with labels, just wrap the radio element along with label text using the <label> element.

<label>
  <input class="radio" type="radio" />
  <span>Radio with a label</span>
</label>

Disabled

Adding the boolean disabled attribute to the input element will provide visual indication that the radio is not available for use.

<input class="radio" type="radio" disabled checked />

Invalid

Adding the is-invalid class or aria-invalid="true" attribute to the radio component will provide visual indication that the form-control value is invalid. Invalid state is also triggered by the native :user-invalid state.

<input class="radio is-invalid" type="radio" />