Label

Names a form control. 12px secondary text, set above the control.

Preview

In action

Mark

The studio

The mark sits above the field. Twelve pixels.

When to use

Use it for

  • Naming a control that does not take a label prop.
  • Custom layouts where the label sits apart from the field.

Not for

  • Alongside Input's own label prop; it already renders one.
  • As a heading; use the type scale.

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 { Label } from "@noorddev/vlak-react";

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

2. Vendor the source

npx @noorddev/vlak-cli add label

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/label.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 { Label } from "@noorddev/vlak-react";

<Label htmlFor="name">Name</Label>
<input id="name" className="rs-input rs-input-full" />

Props

Label

Label above a control. 12px, secondary ink.

Also accepts LabelHTMLAttributes<HTMLLabelElement>.

Accessibility

Markup

<label class="rs-label" for="name">Name</label>

Classes

.rs-label