TextField
A labelled single-line field: names, titles, emails, URLs. It shows the four message tones: help in muted text, ok, info and warn with an icon, and the error.
- TextField
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, TextField
Shown to your team.
Enter an email address like name@example.com
Dark theme, TextField
Shown to your team.
Enter an email address like name@example.com
High contrast theme, TextField
Shown to your team.
Enter an email address like name@example.com
UsageLink to the section Usage
import { TextField } from '@skribly/ui/forms'<TextField label="Email" type="email" isRequired
errorMessage="Enter an email address like name@example.com" />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The label, description, status and error are linked by React Aria; an invalid field sets aria-invalid and lists the error first.
- With isRequired and native validation the browser message shows on submit.
- Long words in messages wrap instead of overflowing.
This demo runs through axe in all three themes on every test run. See what the tests check.