Form Field
Field with validation and errors. Free, MIT · Forms and input › Whole forms and filters
Installation
npx valyro-cli@latest add form-fieldnpx shadcn@latest add https://valyro.xyz/r/form-field.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { FormField } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
label | ReactNode | Text of the <label> above the control, linked to it by id. Or FormField.Label. | |
hint | ReactNode | Helper text under the control, linked via aria-describedby. Hidden while error is set. Or FormField.Description. | |
error | ReactNode | Error message; any truthy value marks the field invalid and replaces the hint. Or FormField.Error. | |
required | boolean | false | Shows a required mark next to the label and tells screen readers: aria-required on the control, or the labels.required word in its description where its role has no aria-required. |
counter | ReactNode | Slot at the end of the footer, e.g. a character counter "42/280". | |
children * | ReactNode | A single control. It receives id, aria-describedby, aria-invalid and, for components, invalid. Or the compound form: FormField.Label, FormField.Control (around the control), FormField.Description, FormField.Error. | |
labels | Partial<FormFieldLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Compound parts
FormField.Label (FormFieldLabel), FormField.Control (FormFieldControl), FormField.Description (FormFieldDescription), FormField.Error (FormFieldError)
Related components
- Label — The name of a form control: required and optional marks read as words, an info tooltip, linked inside a FormField
- Multi-step Form — Multi-step form: per-step validation, skipping, review before submit, drafts
- Form Autosave Status — Form autosave status: offline, error, version conflict and a useAutosave hook
- Filter Builder — Filter builder: nested AND/OR groups, field-aware conditions, JSON and a summary
- Filter Toolbar — Catalog filter bar: result count, dropdown filters, sorting, chips
- Text Input — Text fields
- Input Group — A field joined with text, buttons and selects in one frame
- Textarea — Multiline text input
- Search Input — Search field
- Mentions Input — Text with @mentions and #tags, async suggestions
- Tags Input — Tag entry
- Select — Pick one option from a list
Previous: Label · Next: Multi-step Form · All Forms and input