Form

Collects related inputs as stacked fields with one primary action at the end.

Preview

In action

Send

When to use

Use it for

Any form: fields stack, one primary action at the end.
Native validation attributes; the platform reports them.

Not for

Search boxes and single fields; use InlineForm.
Multi-column layouts; stack instead.

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 { Button, Field, FieldLabel, Form, Input } from "@noorddev/vlak-react";

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

2. Vendor the source

npx @noorddev/vlak-cli add form

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

3. Through shadcn

npx shadcn add https://vlak.dev/r/form.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 { Button, Field, FieldLabel, Form, Input } from "@noorddev/vlak-react";

<Form onSubmit={(e) => { e.preventDefault(); save(); }}>
  <Field>
    <FieldLabel htmlFor="name">Name</FieldLabel>
    <Input plain id="name" required />
  </Field>
  <Field>
    <FieldLabel htmlFor="email">E-mail</FieldLabel>
    <Input plain id="email" type="email" required />
  </Field>
  <Button type="submit">Send</Button>
</Form>

Props

Form

Native form. Fields stack. One primary action at the end.

Also accepts FormHTMLAttributes<HTMLFormElement>.

Keyboard

Keys	Does
`Enter`	Submits from a text field

Accessibility

A native <form>; name it with aria-label or aria-labelledby when the page has more than one.
Field wires labels, hints, and errors to the controls.

Markup

<form class="rs-form"><div class="rs-field"><span class="rs-field-label">Name</span><input class="rs-input rs-input-full" /></div><div class="rs-field"><span class="rs-field-label">E-mail</span><input class="rs-input rs-input-full" /></div><button class="rs-btn-primary">Send</button></form>

Classes

.rs-form

Depends on

/field /input /button