Input

Single-line and multi-line text entry. States: default, focus, hover, disabled, error, success. Variants: password (with eye toggle), clearable (with X), search (with search icon), phone number (with country selector), and multiline (free-form <textarea>). The numeric field with stepper buttons is documented in the Number Input section below. Always pair with a .lb-label; add .lb-field__hint for helper text, or a .lb-field__error carrying an id that the field references with aria-describedby.

a11y (built in): every field is a native control bound to its <label for> — multiline is a real <textarea>, Number a real <input type="number"> — and an invalid field carries aria-invalid + aria-describedby pointing at its .lb-field__error. The generated clear (X) and password-eye buttons get aria-labels that track state (Show password ⇄ Hide password) and stay out of the tab order (tabindex=-1), so the field itself remains the single tab stop; the number steppers are real buttons (aria-label Decrease/Increase) that go disabled at min/max. Phone's country picker is a combobox (role=combobox + aria-haspopup=listbox + aria-expanded, with an aria-label naming the current country) over a role=listbox: ↑/↓/Home/End move, Enter picks, Esc closes and returns focus to the trigger.

Default

Standard text input with label and hint. The minimum useful pattern: .lb-field wraps a .lb-label + .lb-input-wrap + .lb-field__hint.

Helpful hint text

Sizes

Two sizes: medium (default, 36px) and small (28px). Add .lb-input--small for compact toolbars or filter rows.

States

Validation states: .lb-input--error and .lb-input--success swap the border color and pair with .lb-field__error / .lb-field__success. The native disabled attribute handles the disabled state.

This field is required
Looks good!

Clearable

Add data-lb-clearable to the field; an X button appears once the user types and wipes the value on click. Useful for filter inputs and search.

Type something — an X button appears to clear

With leading icon

An icon slot inside the wrap; pair with .lb-input--has-start on the input to reserve padding. Combine with data-lb-clearable for the typical search field.

Password

Add data-lb-password and use type="password"; an eye-toggle appends automatically and switches between password / text. Works at both sizes.

Click the eye icon to toggle visibility

Phone number

Compound field: country-code dropdown + tel input. Use .lb-phone with data-lb-phone; states (--error, --disabled) live on the wrap, not the input.

Select your country and enter your number
Please enter a valid phone number

Multiline (textarea)

Free-form multi-line entry — descriptions, comments, messages. Use a native <textarea> with the same .lb-input class plus --multiline. Inherits every Input state and token (focus, error, success, disabled). The --multiline modifier defeats the fixed height set by --small / --medium, restores block-level padding, pins resize to vertical only, and applies sensible width constraints (min ~18rem, max ~45rem — comfortable line length for prose, collapses on narrow parents). Override with inline style="max-width: …" or rows="…" as needed.

Max 500 characters
Please write at least 20 characters
Looks good

Number Input

Numeric field with stepper buttons, min/max clamping, decimal step support, optional unit prefix/suffix. Native browser spinner hidden; our stepper buttons are the single source of truth. Buttons auto-disable when the value hits the boundary.

Usage: <div class="lb-number-wrap lb-number-wrap--medium" data-lb-number data-lb-min="0" data-lb-max="10" data-lb-step="1"> with <button class="lb-number__step lb-number__step--dec">, <input type="number" class="lb-number">, <button class="lb-number__step lb-number__step--inc"> inside. Dispatches lb-number-change with { value }. Read/write via wrap._lbNumber.getValue() / .setValue(v).

Default

Medium size, no constraints. Type directly, or use the ± buttons, or press ↑/↓ on your keyboard.

Last change: 1

Sizes

Small — --sm
Medium (default)

Min / max with auto-disable

Range 0–10. Buttons grey out at the boundary. Typing outside the range clamps on blur.

Try clicking − now (already at min) — button is disabled.

Decimal step

Step 0.1 — for ratings, tolerances, fine-grained sliders. Rounding handled internally so you never see 0.30000004.

Prefix — currency

Unit prefix ($, €, etc.) sits inside the wrap. Text left-aligns because prefix anchors the start.

$

Suffix — percentage

%

Prefix + suffix + steppers

All four slots together. Useful for amounts with unit codes (e.g. $ 1,000 USD).

$ USD

States

Must be positive.
Looks right.