Label
The name of a form control: required and optional marks read as words, an info tooltip, linked inside a FormField. Free, MIT · Forms and input › Whole forms and filters
The text that names a form control. Outside a FormField it is a plain <label htmlFor>; inside one it finds the control on its own. A required mark that screen readers hear as a word, an "(optional)" note, and an info button with a tooltip that stays out of the control's accessible name.
Installation
npx valyro-cli@latest add labelnpx shadcn@latest add https://valyro.xyz/r/label.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { Label } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
required | boolean | Shows the "*" mark; screen readers hear the labels.required word instead. Inside a FormField: the field's required. | |
optional | boolean | false | Shows labels.optional after the text, for forms where most fields are required. |
disabled | boolean | false | Dims the label to match a disabled control. |
info | ReactNode | Extra help behind an info button next to the label, shown in a Tooltip on hover and focus. | |
size | 'sm' | 'md' | 'md' | Text size. |
labels | Partial<LabelLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Form Field — Field with validation and errors
- 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: Image Cropper · Next: Form Field · All Forms and input