Form Control

The form-control utility class is a flexible and customizable Tailwind CSS utility to style input and textarea elements.

Installation

pnpm

pnpm i @vue-interface/form-control

yarn

yarn add @vue-interface/form-control

npm

npm i @vue-interface/form-control

bun

bun i @vue-interface/form-control

Tailwind Setup

@import '@vue-interface/form-control/index.css';

Basic Usage

Some Label

Placeholder

Disabled

Disabled (Placeholder)

Readonly

Show Code

<div>
    <label for="control" class="form-label">Some Label</label>
    <input type="text" id="control" class="form-control" />
</div>
<div>
    <label class="form-label">Placeholder</label>
    <input type="text" id="control" class="form-control" placeholder="Placeholder" />
</div>
<div>
    <label class="form-label">Disabled</label>
    <input type="text" id="control" class="form-control" value="Disabled" disabled />
</div>
<div>
    <label class="form-label">Disabled (Placeholder)</label>
    <input type="text" id="control" class="form-control" placeholder="Disabled" disabled />
</div>
<div>
    <label class="form-label">Readonly</label>
    <input type="text" id="control" class="form-control" placeholder="Readonly" readonly />
</div>

Sizes

Customize the size of the input area 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-control-[size].

Show Code

<input type="text" class="form-control form-control-xs" placeholder="form-control-xs" />
<input type="text" class="form-control form-control-sm" placeholder="form-control-sm" />
<input type="text" class="form-control form-control-md" placeholder="form-control-md" />                            
<input type="text" class="form-control form-control-lg" placeholder="form-control-lg" />                            
<input type="text" class="form-control form-control-xl" placeholder="form-control-xl" />                            
<input type="text" class="form-control form-control-2xl" placeholder="form-control-2xl" />                            
<input type="text" class="form-control form-control-3xl" placeholder="form-control-3xl" />                            
<input type="text" class="form-control form-control-4xl" placeholder="form-control-4xl" />
<input type="text" class="form-control form-control-5xl" placeholder="form-control-5xl" />

Tailwind Sizes

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

Show Code

<input type="text" class="form-control form-control-4" placeholder="form-control-4" />
<input type="text" class="form-control form-control-5" placeholder="form-control-5" />
<input type="text" class="form-control form-control-6" placeholder="form-control-6" />

Arbitrary Sizes

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

Show Code

<input type="text" class="form-control form-control-4" placeholder="form-control-4" />
<input type="text" class="form-control form-control-5" placeholder="form-control-5" />
<input type="text" class="form-control form-control-6" placeholder="form-control-6" />

Plaintext

Plaintext

Show Code

<div>
    <label class="form-label">Plaintext</label>
    <input type="text" id="control" class="form-control-plaintext" value="Readonly" readonly />
    <input type="text" id="control" class="form-control-plaintext" placeholder="Readonly Placeholder" readonly />
    <input type="text" id="control" class="form-control-plaintext" value="Readonly & Disabled" readonly disabled />
    <input type="text" id="control" class="form-control-plaintext" value="Readonly & Disabled Placeholder" readonly disabled />
</div>

Validation

Validation classes provides error-checking styling for the form-control element. The is-invalid and is-valid classes provide the styling for invalid and valid elements, respectively.

Invalid Field

This is an inline error.

This is an inline error.

This is an inline error.

Valid Field

This is an inline success message.

This is an inline success message.

This is an inline success message.

Show Code

<div>
    <label class="flex-shrink-0 invalid-feedback">Invalid Field</label>
    <div>
        <input type="text" class="form-control is-invalid" value="This field is invalid" />
        <div class="invalid-feedback">This is an inline error.</div>
    </div>
    <div class="invalid-feedback">This is an inline error.</div>
    <div>
        <div class="invalid-feedback">This is an inline error.</div>
    </div>
</div>
<div>
    <label class="flex-shrink-0 valid-feedback">Valid Field</label>
    <div>
        <input type="text" class="form-control is-valid" value="This field is invalid" />
        <div class="valid-feedback">This is an inline success message.</div>
    </div>
    <div class="valid-feedback">This is an inline success message.</div>
    <div>
        <div class="valid-feedback">This is an inline success message.</div>
    </div>
</div>

Custom Colors

Customize the color of a form-control element with the Tailwind color palette by using the class: form-control-[color].

Show Code

<input type="text" class="form-control form-control-amber-500" />
<input type="text" class="form-control form-control-green-500" />
<input type="text" class="form-control form-control-purple-500" />
<input type="text" class="form-control form-control-neutral-500" />

Animated

The form-control-animated class provides a custom animated component where the label can be nested inside the input space and move when interacted with. This decreases the size needed for a form-control component.

form-control

<div class="form-control-animated">
    <label for="form-control-animated" class="form-label">form-control</label>
    <input type="text" id="form-control-animated" class="form-control is-dirty" placeholder="form-control"/>
</div>

Use the size classes described above to customize the size of the animated field.

form-control-xs

form-control-sm

form-control-md

form-control-lg

form-control-xl

form-control-2xl

form-control-3xl

form-control-4xl

form-control-5xl

form-control-3

form-control-4

form-control-[1.5rem]

Show Code

<div class="form-control-animated-xs">
    <label for="form-control-animated-xs" class="form-label">form-control-xs</label>
    <input type="text" id="form-control-animated-xs" class="form-control form-control-xs" placeholder="form-control-xs"/>
</div>
<div class="form-control-animated-sm">
    <label for="form-control-animated-sm" class="form-label">form-control-sm</label>
    <input type="text" id="form-control-animated-sm" class="form-control form-control-sm" placeholder="form-control-sm"/>
</div>
<div class="form-control-animated-md">
    <label for="form-control-animated-md" class="form-label">form-control-md</label>
    <input type="text" id="form-control-animated-md" class="form-control form-control-md" placeholder="form-control-md"/>
</div>
<div class="form-control-animated-lg">
    <label for="form-control-animated-lg" class="form-label">form-control-lg</label>
    <input type="text" id="form-control-animated-lg" class="form-control form-control-lg" placeholder="form-control-lg"/>
</div>
<div class="form-control-animated-xl">
    <label for="form-control-animated-xl" class="form-label">form-control-xl</label>
    <input type="text" id="form-control-animated-xl" class="form-control form-control-xl" placeholder="form-control-xl"/>
</div>
<div class="form-control-animated-2xl">
    <label for="form-control-animated-2xl" class="form-label">form-control-2xl</label>
    <input type="text" id="form-control-animated-2xl" class="form-control form-control-2xl" placeholder="form-control-2xl"/>
</div>
<div class="form-control-animated-3xl">
    <label for="form-control-animated-3xl" class="form-label">form-control-3xl</label>
    <input type="text" id="form-control-animated-3xl" class="form-control form-control-3xl" placeholder="form-control-3xl"/>
</div>
<div class="form-control-animated-4xl">
    <label for="form-control-animated-4xl" class="form-label">form-control-4xl</label>
    <input type="text" id="form-control-animated-4xl" class="form-control form-control-4xl" placeholder="form-control-4xl"/>
</div>
<div class="form-control-animated-5xl">
    <label for="form-control-animated-5xl" class="form-label">form-control-5xl</label>
    <input type="text" id="form-control-animated-5xl" class="form-control form-control-5xl" placeholder="form-control-5xl"/>
</div>
<div class="form-control-animated-3">
    <label for="form-control-animated-3" class="form-label">form-control-3</label>
    <input type="text" id="form-control-animated-3" class="form-control form-control-3" placeholder="form-control-3"/>
</div>
<div class="form-control-animated-4">
    <label for="form-control-animated-4" class="form-label">form-control-4</label>
    <input type="text" id="form-control-animated-4" class="form-control form-control-4" placeholder="form-control-4"/>
</div>
<div class="form-control-animated-[1.5rem]">
    <label for="form-control-animated-[1.5rem]" class="form-label">form-control-[1.5rem]</label>
    <input type="text" id="form-control-animated-[1.5rem]" class="form-control form-control-[1.5rem]" placeholder="form-control-[1.5rem]"/>
</div>

Custom Components

There are two custom components: a color picker and a custom light/dark mode switch

Color Picker

Add a color picker to your UI using the form-control-color class. This allows for pixel-level anaylsis of the colors within the UI.

Color Picker

<label class="form-label">Color Picker</label>
<input type="color" id="control" class="form-control form-control-color" />

Light/Dark Mode Switch

Add this switch to the UI using the the form-switch-light-dark class. It is a custom component of the form-switch element

LightDark

<div class="flex items-center gap-2">
    <label class="form-label">Light</label>
    <input v-model="dark" type="checkbox" class="form-switch form-switch-md form-switch-light-dark" />
    <label class="form-label">Dark</label>
</div>