Inputs / TextField

TextField

Focus swipes a highlighter across the label and makes the outline boil. Errors switch to tomato ink and say how to fix it.

Server or clientWCAG AASince v0.1

Caller name

Optional. Anonymous reports are fine.

Location

Add a street, barangay, or landmark so responders can find it.

Callback number

Looks good.

What happened?

import { TextField, TextArea } from "@plop-ui/react";

<TextField label="Caller name" hint="Optional. Anonymous reports are fine." />
<TextField label="Location" error="Add a street, barangay, or landmark so responders can find it." />
<TextArea label="What happened?" placeholder="Write it like you'd say it on the phone." />

Change every prop live in the playground.

Props

`TextField`

Prop	Type	Default	What it does
label required	ReactNode	—	The visible label. Required: every field needs a name.
className	string	none	—
error	ReactNode	none	An error that says how to fix it. Turns the field tomato and sets aria-invalid.
hint	ReactNode	none	Help under the field.
success	boolean	false	Shows a green tick when the value is good.

Also takes every attribute of <input> (307 more, e.g. onClick, className, aria-*).

`TextArea`

Prop	Type	Default	What it does
label required	ReactNode	—	The visible label. Required: every field needs a name.
className	string	none	—
error	ReactNode	none	An error that says how to fix it. Turns the field tomato and sets aria-invalid.
hint	ReactNode	none	Help under the field.
ruled	boolean	true	Notebook lines behind the text.
success	boolean	false	Shows a green tick when the value is good.

Also takes every attribute of <textarea> (291 more, e.g. onClick, className, aria-*).

Use it well

DoWrite errors that say how to fix the problem, not just that there is one.

Don'tUse the placeholder as the label. It disappears as soon as someone types.

Accessibility

A real <label> for every field; the label prop is required.
Hints and errors are linked with aria-describedby; errors set aria-invalid.
Errors carry an icon and words, never color alone.