Design System
Work in progress. I'm adding components as I go, following patterns from what's already documented. Nothing here is set in stone yet.
Form
Text inputs, textarea, and form field wrappers. Chromatic — focus border and glow inherit --accent-color from context.
Input
Atom
Chromatic text input — focus border and glow inherit --accent-color.
Default
<Input placeholder="Claude Monet" type="text" /> Invalid
<Input invalid placeholder="..." /> Chromatic
Focus adapts to --accent-color
Props
| Prop | Type | Default | Description |
|---|---|---|---|
invalid | boolean | false | Toggles red border/background |
...attrs | ComponentProps<"input"> | — | All native input attributes |
SearchInput
Atom
Compact search input wrapping Input with type="search" and a styled clear button.
Default
<SearchInput placeholder="Search…" /> Props
| Prop | Type | Default | Description |
|---|---|---|---|
...attrs | ComponentProps<"input"> | — | All native input attributes |
Textarea
Atom
Chromatic textarea — focus border and glow inherit --accent-color.
Default
<Textarea placeholder="Describe your project..." /> Invalid
<Textarea invalid placeholder="..." /> Chromatic
Focus adapts to --accent-color
Props
| Prop | Type | Default | Description |
|---|---|---|---|
invalid | boolean | false | Toggles red border/background |
...attrs | ComponentProps<"textarea"> | — | All native textarea attributes |
FormField
Molecule
Label + input wrapper for form layouts.
With Input
<FormField label="Votre nom"><Input ... /></FormField> With Textarea
<FormField label="Votre projet"><Textarea ... /></FormField> Props
| Prop | Type | Description |
|---|---|---|
label | string | Label text displayed above the input |
children | JSX.Element | Input or Textarea component |