Input

npm install @vrembem/input

@use "@vrembem/input";

Options

Input 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-input-accent

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

--vb-input-font-size

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

--vb-input-line-height

var(--vb-form-control-line-height)

--vb-input-padding

var(--vb-form-control-padding-y)

--vb-input-border-radius

var(--vb-form-control-border-radius)

--vb-input-border-width

var(--vb-form-control-border-width)

--vb-input-background

var(--vb-form-control-background)

--vb-input-foreground

var(--vb-form-control-foreground)

--vb-input-border-color

var(--vb-border-color-strong)

--vb-input-box-shadow

var(--vb-form-control-box-shadow)

--vb-input-background-hover

var(--vb-input-background)

--vb-input-foreground-hover

var(--vb-input-foreground)

--vb-input-border-color-hover

var(--vb-input-border-color)

--vb-input-box-shadow-hover

var(--vb-form-control-box-shadow)

--vb-input-background-focus

var(--vb-input-background)

--vb-input-foreground-focus

var(--vb-input-foreground)

--vb-input-box-shadow-focus

none

--vb-input-foreground-placeholder

var(--vb-foreground-subtle)

--vb-input-background-readonly

var(--vb-form-control-background-readonly)

--vb-input-background-disabled

var(--vb-form-control-background-disabled)

--vb-input-opacity-disabled

var(--vb-form-control-opacity-disabled)

Basic usage

The most basic implementation of the input component consists of the input class applied to an <input> element.

<input class="input" type="text" placeholder="Example input..." />

Disabled

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

<input class="input" type="text" disabled />

Readonly

Adding the boolean readonly attribute to the input will provide visual indication that the user should not be able to edit the value of the input.

<input class="input" type="text" readonly />

Textarea

Apply the input class to a <textarea> element to apply styles with textarea specific properties. use the rows attribute to adjust the initial height.

<textarea class="input" rows="3">...</textarea>

Invalid

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

<input class="input is-invalid" type="text" value="Invalid input..." />
<textarea class="input is-invalid" rows="3">...</textarea>