Form Field

Field with validation and errors. Free, MIT · Forms and input › Whole forms and filters

Installation

npx valyro-cli@latest add form-field

npx shadcn@latest add https://valyro.xyz/r/form-field.json

npm 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

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
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
Multi Select — Pick several options
Combobox — Searchable select

Previous: Image Cropper · Next: Multi-step Form · All Forms and input