Shadcn Field Settings Form

When to use

• Labeled inputs, selects, text areas and code entry with optional hint text under the control
• Preference and permission lists where every switch or checkbox has a title and a description
• Validation states with a red label and one error, or a list of them, under the control

When not to use

• A sign up whose password fails a list of rules under one input: use the Field Validation Errors example
• A complete page for entering or editing a record, such as an invoice or a profile: use the Form blocks
• A full page of toggle rows for alert channels, app integrations or workspace options: use the Settings blocks
• A numeric value stepped with plus and minus buttons or scrubbed by dragging: use the Number Field component

Agent notes

• Save Changes is a Button outside any form element with no handler, so nothing is sent
• The slug FieldError text and data-invalid are fixed; set both from your slug check result
• The 24/160 bio count is static and does not match the default text; compute it from the Textarea value
• FieldTitle is a plain div, so a Checkbox or Switch titled only by it has no accessible name; point a FieldLabel at its id instead
• data-invalid on Field only sets a red text color, which its label inherits; the control turns red from aria-invalid, which no example sets
• Nothing ties FieldDescription or FieldError to the control; give them ids and list those in the control's aria-describedby