Components · Controls

FieldField

A text field with a label, a hint and an error

npx shadcn@latest add @umbra/field

Input (48 px pill), Textarea (nested radius) and Field (label, field, hint or error). Label, hint and error align with the field’s left edge; text inside starts at a 20 inset. A field is one of the two cases where Umbra has a border: --border 1 px

When to use

  • Title, note, API key, address
  • Field around any input so the label and error are tied to it for screen readers

When not to use

  • Choosing from a list: Select
  • “On / off”: Toggle
  • Search in the page header: SearchToggle

Recording settings

Apply to new meetings

Only you can see it

Do

  • Error: what happened and what to do (“The key didn’t work. Check that you copied all of it”)

Don’t

  • Red for errors: red means recording and deletion; warnings are Giants
  • A placeholder instead of a label