Text field
A text field is a single-line input that always has a name. Its label is a required prop, because a placeholder is not a label.
Sizes and mono
Use mono for keys and ids. Small is 32px for toolbars and filters.
Show code
<KbTextField label="Subject" placeholder="Cannot export" />
<KbTextField label="Request key" mono size="sm" />When to use
- Use it for a bare input in a toolbar, filter or table row where a visible label would repeat the column.
- For a form with a visible label, help and error text, wrap a KbInput in a field.
- Use type email, url, tel or number so the keyboard and validation match.
Import
import { KbInput } from "@/components/ui/KbField";
import { KbTextField } from "@/components/ui/KbTextField";
<KbTextField label="Request key" placeholder="KB-1042" mono />Props
| Prop | Type | Default | What it does |
|---|---|---|---|
label | string | None | Required. The accessible name (aria-label). |
size | "sm" | "md" | "md" | 32 or 36px tall. |
mono | boolean | false | The code face, for keys and ids. |
type | string | "text" | Any native input type. |
…input props | InputHTMLAttributes | None | Everything native except className and style. |
Keyboard and screen readers
- The label is an aria-label, so assistive tech always has a name.
- Inside a field, help and error text are linked automatically.
- Placeholder text meets 4.5:1 but is a hint, never the name.