Component

Input

A text field for forms—pill shape with a diffuse shadow. Optional label and error helper text; error uses feedback.danger (ring).

With label

The label prop for accessibility; connects via htmlFor/id.

Sizes

sm, md (default), lg — height and padding aligned with the Button.

States

Error = danger ring + helper text; disabled = reduced opacity, no interaction.

Specification

  • Shape: pill (rounded-full)
  • Shadow: shadow-ds-diffuse-sm default, shadow-ds-diffuse-md on focus
  • Focus: ring 2px ds-primary-strong, offset 2
  • Error: ring ds-feedback-danger + helper text
  • Font: Figtree, body size (16px default); placeholder uses text.muted