Forms

Form elements

Native HTML inputs restyled to match the system — text input, select, textarea, checkbox, radio, and toggle. All controls share a 32 px standard height, 6 px corner radius, and a soft --accent-glow focus ring instead of the bare browser outline.

Overview

Forms compose native elements (<input>, <select>, <textarea>) inside a labeled .ds-field wrapper that supplies the visual chrome: 12/600 label on top, control in the middle, optional 12 px help text below. Toggles use a custom .toggle primitive that flips on click via a state class.

Use cases

  • Wizard cards. Stack 4–6 fields per card. Use .req on labels for required fields.
  • Filter panels. Combine selects + checkboxes for facet filters that affect a list view.
  • Settings forms. Use toggles for binary preferences; selects for one-of-N choices; textarea for long-form notes.
  • Inline editors. Drop a single text input into a row cell for in-place editing.

Properties

ElementClassNotes
Field wrapper.ds-fieldVertical label + control + help text stack with consistent gap.
Required marker.reqAsterisk inside the label for required fields.
Help text.help12/400 help-text-colored note under the control.
Text input<input type="text">32 px height, 6 px radius, accent focus ring.
Select<select>Same chrome as text input. Use native rendering — don't rebuild as a div.
Textarea<textarea>Multi-line variant. Use rows attr to set initial height.
Toggle.toggle + .toggle.onCustom switch. Click adds/removes .on class via JS.

Types & styles

ControlWhen to use
Text inputFree-form short strings — names, identifiers, search queries.
SelectOne-of-N choice from a known list with ≤20 options.
TextareaMulti-line free-form text — descriptions, notes, messages.
CheckboxIndependent on/off choices — "Notify me", "Auto-archive".
RadioMutually exclusive choice from a small set (≤5 options).
ToggleBinary setting with immediate effect — applies on flip, no save button.

Best practices

  • Label every control. Use a visible label inside .ds-field — never rely on placeholder text as the label.
  • Help text below, not in placeholder. Placeholders disappear when the user types. Important context belongs in .help.
  • Use native HTML. Don't rebuild <select> as a custom dropdown unless you genuinely need search or grouping.
  • Toggle ≠ checkbox. Use toggles for settings that take effect immediately. Use checkboxes for choices that need an explicit submit.
  • Required asterisks belong on labels. Wrap the asterisk in .req for consistent danger-tint styling.