Input

Collects one line of text. 1px border, 2px focus ring, 12px label above.

Preview

E-mail

In action

Name

On the invoice

One field. The name is as it prints.

E-mail

When to use

Use it for

Single-line text, e-mail, number, password, and search fields.
label, hint, and error together; the component wires them to the control.

Not for

Long text; use Textarea.
A fixed set of options; use Select or NativeSelect.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Input } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/input.

2. Vendor the source

npx @noorddev/vlak-cli add input

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/input.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Input } from "@noorddev/vlak-react";

<Input label="E-mail" type="email" placeholder="you@example.com" hint="We never share it." />
<Input label="Name" error="Name is required." />
<Input label="Handle" ok feedback="Available" />

Props

Input

Prop	Type	Description
`label`	`ReactNode`	Label rendered above the field at 12px.
`ok`	`boolean`	Marks the field as validated: ink border and ink feedback text.
`feedback`	`ReactNode`	Quiet feedback line under the field.
`hint`	`ReactNode`	Hint under the field; it describes the control.
`error`	`ReactNode`	Error under the field; it describes the control and marks it invalid.
`plain`	`boolean`	Control only — no field stack. For Field / InputGroup.
`grouped`	`boolean`	Flush into an InputGroup: no own stroke.

Also accepts InputHTMLAttributes<HTMLInputElement>.

Keyboard

Keys	Does
`Tab`	Moves focus to the field
`Enter`	Submits the enclosing form

Accessibility

Renders a native <input> with a generated id; label points at it with htmlFor.
hint and error are linked through aria-describedby; error also sets aria-invalid and renders with role="alert".
Inside Field, pass plain so Field's hint and error describe the control instead.

Markup

<div class="rs-field"><span class="rs-field-label">E-mail</span><input class="rs-input rs-input-full" /></div>

Classes

.rs-field.rs-field-label.rs-input.rs-input-full.rs-input-ok.rs-input-invalid.rs-feedback.rs-feedback-ok.rs-feedback-error.rs-input-field.rs-input-grouped.rs-input-label