All docs

FormElement

Single form control — input, textarea, select, checkbox, radio, etc. There is no separate Input or Select component — everything goes through FormElement with a type discriminator.

Single form control — input, textarea, select, checkbox, radio, etc. There is no separate Input or Select component — everything goes through FormElement with a type discriminator.

Key files

Key props

PropNotes
typeRequired. text | textarea | email | password | url | tel | date | datetime-local | radio | checkbox | select | reset | hidden | color | month | number | range | search | time | week | file.
nameSubmission key.
placeholder
required, disabled, readonly
optionsFor select / radio / checkbox: [{ label, value }, ...].
value / defaultValue
attrsDOM passthrough — autocomplete, pattern, min/max, etc.

Gotchas

  • Form inputs need explicit borders against bg-base-100 cards. DaisyUI defaults render as transparent inputs that disappear on cream/white. Every FormElement needs border border-base-300 bg-base-100 rounded-box px-space-sm py-space-xs (one step lighter/darker than the card).
  • Use styleGuide tokens (inputBorderColor, inputBgColor, inputTextColor, inputFocusRingColor) for site-wide consistency.
  • Quantity → cart pattern: pair with Button.action: { type: "add-to-cart", quantityField: "<input-name>" } — Button reads the value of [name="<input-name>"] from the closest form ancestor at click time.

Related