C
Storybook
04Shipped

Input

Single-line text input. Always compose with Label for accessible forms.

Import

import { Input, Label } from "@charply/design"

Variants

With label

Disabled

Guidelines

docs/design/components/input.md

Do

  • ✓Always pair `Input` with a visible `Label` using matching `htmlFor` / `id`.
  • ✓Use `aria-invalid` for validation error states.

Don't

  • ✗Use `placeholder` as the only label — it disappears on input and is not screen-reader accessible on its own.
  • ✗Add manual `border-*` overrides for normal states — the component uses `border-input` by default.

See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.