vamosUI
ComponentsForms & inputs

Input & Field

Text input, multi-line textarea, and Field, which wraps them with a label, hint and error message.

components/input.tsxtheme · material · accent · density · font

Installation

$ pnpm add @vamos-cms/ui

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-cms/ui/styles.css";

Usage

import { Field, Input } from "@vamos-cms/ui";

<Field label="Title" hint="Keep it under 60 characters.">
<Input placeholder="Post title" />
</Field>

Examples

With Field

Field wires up id, aria-invalid and aria-describedby for you.

Keep it under 60 characters for search results.

This address is already registered.

Leading & trailing

Use leading / trailing for an icon, unit or button.

Textarea

Grows with its content via field-sizing: content.

Grows as you type.

Disabled

API

Input

PropTypeDefault
leading
Icon or text at the start.
ReactNode—
trailing
Icon, unit or button at the end.
ReactNode—
...props
All native input attributes.
InputHTMLAttributes—

Field

PropTypeDefault
label
Label, linked to the control with htmlFor.
ReactNode—
hint
Helper text.
ReactNode—
error
Error text; also sets aria-invalid.
ReactNode—
required
Adds * to the label.
boolean—
children
A single control (Input, Textarea, Select…).
ReactElement—
Previous
Card