Vue Interface

Appearance

Checkbox Field ​

The CheckboxField component extends the form-control component and provides a flexible checkbox input with support for custom colors, sizes, states, and validation.

Installation ​

bash
pnpm i @vue-interface/checkbox-field
bash
yarn add @vue-interface/checkbox-field
bash
npm i @vue-interface/checkbox-field
bash
bun i @vue-interface/checkbox-field

Basic Usage ​

Value: false
html
<CheckboxField
    v-model="value"
    label="Checked"
    value="1"
    @change="onChange"
    @click="onClick"
    @blur="onBlur"
    @focus="onFocus">
</CheckboxField>

Custom Colors ​

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

Colors: [ "red" ]
Show Code
html
<CheckboxField 
    v-model="colors" 
    label="Red" 
    value="red" 
    color="form-check-red-500" 
    checked>
</CheckboxField>
<CheckboxField 
    v-model="colors" 
    label="Green" 
    value="green" 
    color="form-check-green-500">
</CheckboxField>
<CheckboxField 
    v-model="colors" 
    label="Blue" 
    value="blue" 
    color="form-check-blue-500">
</CheckboxField>
<CheckboxField 
    v-model="colors" 
    label="Yellow" 
    value="yellow" 
    color="form-check-yellow-500">
</CheckboxField>
<CheckboxField 
    v-model="colors" 
    label="Purple" 
    value="purple" 
    color="form-check-purple-500">
    Purple
</CheckboxField>
<CheckboxField 
    v-model="colors" 
    label="Pink" 
    value="pink" 
    color="form-check-pink-500">
    Pink
</CheckboxField>

States ​

Show Code
html
<CheckboxField label="Disabled" disabled></CheckboxField>
<CheckboxField label="Disabled (checked)" checked disabled></CheckboxField>
<CheckboxField label="Readonly" readonly></CheckboxField>
<CheckboxField label="Readonly (checked)" checked readonly></CheckboxField>
<CheckboxField label="Readonly & Disabled" readonly disabled></CheckboxField>
<CheckboxField label="Readonly & Disabled (checked)" readonly disabled checked></CheckboxField>

Sizes ​

Customize the checkbox'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].

Show Code
html
<CheckboxField name="size[]" class="form-check-xs" placeholder="Extra Small">xs</CheckboxField>
<CheckboxField name="size[]" class="form-check-sm" placeholder="Small">Small</CheckboxField>
<CheckboxField name="size[]" class="form-check-md" placeholder="Medium">Medium</CheckboxField>
<CheckboxField name="size[]" class="form-check-lg" placeholder="Large">Large</CheckboxField>
<CheckboxField name="size[]" class="form-check-xl" placeholder="Extra Large">XL</CheckboxField>
<CheckboxField name="size[]" class="form-check-2xl" placeholder="2xl">2xl</CheckboxField>
<CheckboxField name="size[]" class="form-check-3xl" placeholder="3xl">3xl</CheckboxField>
<CheckboxField name="size[]" class="form-check-4xl" placeholder="4xl">4xl</CheckboxField>
<CheckboxField name="size[]" class="form-check-5xl" placeholder="5xl">5xl</CheckboxField>

Tailwind Sizes ​

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

Show Code
html
<CheckboxField name="size[]" class="form-check-4" placeholder="form-check-4">form-check-4</CheckboxField>
<CheckboxField name="size[]" class="form-check-5" placeholder="form-check-5">form-check-5</CheckboxField>
<CheckboxField name="size[]" class="form-check-6" placeholder="form-check-6">form-check-6</CheckboxField>

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.).

Show Code
html
<CheckboxField name="size[]" class="form-check-[16px]" placeholder="form-check-[16px]">form-check-[16px]</CheckboxField>
<CheckboxField name="size[]" class="form-check-[1.5rem]" placeholder="form-check-[1.5rem]">form-check-[1.5rem]</CheckboxField>

Validation ​

This is an inline error.
This is an inline error #1.
This is an inline error #2.
This is some success message.
This is some success message.
This is some success message.
Show Code
html
<CheckboxField 
    label="Empty Array of Errors" 
    :errors="[]" 
    class="mb-3">
</CheckboxField>

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