Field
Label, control, hint and error in one wrapper. Field wires the ids for you, so screen readers hear the label, the description and the error with the control.
bunx --bun shadcn@4.17.0 add @waimakers/field- npm dependencies
- @base-ui/react@1.9.0class-variance-authority@0.7.1
From the registry
Base UI Field and Fieldset. Render plain Input or Textarea through FieldControl to associate the label, description and visible errors. Setting invalid also reveals FieldError.
Examples
Basic
A label above the control and a short hint below it. Render a plain Input through FieldControl so Field can associate them.
Colleagues see this name in Slack and in the audit log.
Validation
Submit the form empty to see the error. Field turns the control invalid and announces the message.
Invalid
Set invalid on the Field when your own validation fails, and say how to fix it in FieldError.
Each agent needs its own name.
Disabled
A disabled Field dims its label and control together and refuses input.
Archived agents cannot be renamed. Restore it first.
Horizontal
Checkboxes and switches sit beside their label. Wrap the label and hint in FieldContent.
Show what the agent finished this week in the digest.
Takes effect immediately for every channel the agent joins.
Fieldset
Group related fields under one legend with FieldSet. Disabling the fieldset disables every control inside it.