Radio Field

The radio-field component provides flexible and customizable input fields with customizable sizes, states, and colors.

Installation

pnpm

pnpm i @vue-interface/radio-field

yarn

yarn add @vue-interface/radio-field

npm

npm i @vue-interface/radio-field

bun

bun i @vue-interface/radio-field

Basic Usage

Value: false

Unchecked

Checked

<RadioField v-model="value" name="default" label="Unchecked" value="unchecked"></RadioField>
<RadioField v-model="value" name="default" label="Checked" value="checked" checked></RadioField>

Custom Colors

Customize the color of a radio button using a Tailwind color using the class: form-check-[color].

Color: yellow

Red

Green

Blue

Yellow

Show Code

<RadioField v-model="color" name="color" label="Red" value="form-check-red-500" color="form-check-red-500"></RadioField>
<RadioField v-model="color" name="color" label="Green" value="form-check-green-500" color="form-check-green-500"></RadioField>
<RadioField v-model="color" name="color" label="Blue" value="form-check-blue-500" color="form-check-blue-500"></RadioField>
<RadioField v-model="color" name="color" label="Yellow" value="form-check-yellow-500" color="form-check-yellow-500"></RadioField>

States

Unchecked

Checked

Disabled

Disabled (checked)

Readonly

Readonly (checked)

Readonly & Disabled

Readonly & Disabled (checked)

Show Code

<RadioField label="Unchecked" value="Unchecked"></RadioField>
<RadioField label="Checked" value="checked" checked></RadioField>
<RadioField label="Disabled" value="disabled" disabled></RadioField>
<RadioField label="Disabled (checked)" value="disabled_checked" checked disabled></RadioField>
<RadioField label="Readonly" value="readonly" readonly></RadioField>
<RadioField label="Readonly (checked)" value="readonly_checked" checked readonly></RadioField>
<RadioField label="Readonly & Disabled" value="readonly_disabled" readonly disabled></RadioField>
<RadioField label="Readonly & Disabled (checked)" value="readonly_disabled_checked" readonly disabled checked></RadioField>

Sizes

Customize the radio button's size using a predetermined size, tailwind's numeric sizing classes, or an arbitrary CSS length unit.

Predetermined Sizes

The size can be customized using predetermined size classes: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl. Use the syntax: form-check-[size].

xs

Small

Medium

Large

xl

2xl

3xl

4xl

5xl

Show Code

<RadioField name="size" value="xs" class="form-check-xs">xs</RadioField>
<RadioField name="size" value="sm" class="form-check-sm">Small</RadioField>
<RadioField name="size" value="md" class="form-check-md">Medium</RadioField>
<RadioField name="size" value="lg" class="form-check-lg">Large</RadioField>
<RadioField name="size" value="xl" class="form-check-xl">xl</RadioField>
<RadioField name="size" value="2xl" class="form-check-2xl">2xl</RadioField>
<RadioField name="size" value="3xl" class="form-check-3xl">3xl</RadioField>
<RadioField name="size" value="4xl" class="form-check-4xl">4xl</RadioField>
<RadioField name="size" value="5xl" class="form-check-5xl">5xl</RadioField>

Tailwind Sizes

For more granular control over sizes, use Tailwind's numeric sizing scale classes: form-check-1 - form-check-96.

form-check-4

form-check-5

form-check-6

form-check-7

Show Code

<RadioField name="size" value="4" class="form-check-4">form-check-4</RadioField>
<RadioField name="size" value="5" class="form-check-5">form-check-5</RadioField>
<RadioField name="size" value="6" class="form-check-6">form-check-6</RadioField>
<RadioField name="size" value="7" class="form-check-7">form-check-7</RadioField>

Arbitrary Sizes

For precise sizing, specify exact pixel values using the syntax form-check-[Npx] or any other CSS length units (rem, em, mm, etc.).

form-check-[16px]

form-check-[1.5rem]

Show Code

<RadioField name="size" value="[16px]" class="form-check-[16px]">form-check-[16px]</RadioField>
<RadioField name="size" value="[1.5rem]" class="form-check-[1.5rem]">form-check-[1.5rem]</RadioField>

Validation

Empty Array of Errors

Single Inline Error

This is an inline error.

Multiple Errors From Object

This is an inline error #1.

This is an inline error #2.

Valid Field

Valid Field with Feedback

This is some success message.

Valid Field with Array of Feedback

This is some success message.

This is some success message.

Show Code

<RadioField label="Empty Array of Errors" value="true" :errors="[]" class="mb-3"></RadioField>
<RadioField label="Single Inline Error" value="true" class="mb-3 invalid-feedback" error="This is an inline error."></RadioField>
<RadioField name="multiple" value="true" class="mb-3 invalid-feedback" label="Multiple Errors From Object" :errors="{'multiple': ['This is an inline error #1.', 'This is an inline error #2.']}"></RadioField>
    
<RadioField label="Valid Field" value="true" valid class="mb-3 valid-feedback"></RadioField>
<RadioField label="Valid Field with Feedback" value="true" valid feedback="This is some success message." class="mb-3 valid-feedback"></RadioField>
<RadioField label="Valid Field with Array of Feedback" value="true" valid :feedback="['This is some success message.', 'This is some success message.']" class="mb-3 valid-feedback"></RadioField>