Field
Label, help, status and error around a control that is not one of this group, such as a native element or a widget from another library. Pick a ready field such as TextField when one fits.
- Field
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Field
Optional link
Shown on your public profile.
Use 2 to 6 capital letters, such as WEB.
Dark theme, Field
Optional link
Shown on your public profile.
Use 2 to 6 capital letters, such as WEB.
High contrast theme, Field
Optional link
Shown on your public profile.
Use 2 to 6 capital letters, such as WEB.
UsageLink to the section Usage
import { Field } from '@skribly/ui/forms'<Field label="Website" description="Shown on your profile." errorMessage={error}>
{(control) => <input {...control} type="url" className="…" />}
</Field>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 render function gets id, aria-describedby, aria-invalid and aria-required, so the label names the control and the help, status and error are read after it.
- The asterisk is hidden from screen readers, which hear "required" from aria-required.
- The status is an output element, a polite live region.
This demo runs through axe in all three themes on every test run. See what the tests check.