Text field
Input and text area inside a field with its label, description and error, all wired for assistive tech.
Only for replies.
Features
- Input or text area with its label, description and error.
- Focus ring and invalid state from tokens.
Use it for
- Every form.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react @base-ui/react motion lucide-react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { TextField } from 'runets'
<TextField label="Email" value={v} onChange={setV} description="Only for replies." error={invalid ? 'An email needs an @.' : undefined} />API
| Prop | Type | What it does |
|---|---|---|
label | string | Label. |
description | string | Help below. |
error | string | Shown and announced when set. |
multiline | boolean | Text area. |
Accessibility
- Label, description and error are wired to the control; an error is announced.
Source
The code is in src/kit/inputs.tsx in runets, MIT licensed.