51 lines
1.8 KiB
Markdown
51 lines
1.8 KiB
Markdown
# Form Design Guidelines
|
|
|
|
## CSS Class System
|
|
|
|
Form elements use an atomic design system with three layers:
|
|
|
|
### 1. Base (`input-base`)
|
|
Static styling: padding, font, border, background, placeholder color.
|
|
|
|
### 2. Shadow (`input-shadow-default`)
|
|
Base shadow applied to the element.
|
|
|
|
### 3. State (`input-state-*`)
|
|
Interactive behavior - handles hover/focus/open states with appropriate shadows and borders.
|
|
|
|
- `input-state-focus` - For native inputs (`:focus`)
|
|
- `input-state-open` - For Radix components (`[data-state="open"]`)
|
|
- `input-state-focus-within` - For composite components (`:focus-within`)
|
|
- `input-state-*-tiny` - Smaller focus ring variants
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
// Standard Input
|
|
<input className="input-base input-shadow-default input-state-focus" />
|
|
|
|
// Select (Radix component)
|
|
<SelectTrigger className="input-base input-shadow-default input-state-open" />
|
|
|
|
// InputGroup (composite)
|
|
<div className="input-base input-shadow-default input-state-focus-within">
|
|
<input />
|
|
</div>
|
|
```
|
|
|
|
## Customization
|
|
|
|
Shadow values are CSS variables in `styles/form/effects.css`. Change once, updates everywhere:
|
|
- `--input-shadow-default`
|
|
- `--input-shadow-hover`
|
|
- `--input-shadow-focus`
|
|
- `--input-shadow-focus-tiny`
|
|
|
|
## Non-form Elements
|
|
|
|
Checkboxes, buttons, and other non-input controls use inline Tailwind classes. Don't force them into the input system.
|
|
|
|
## Component Directory Structure
|
|
|
|
Form components are organized by type in folders (e.g., `inputs/`, `sheets/`, `checkboxes/`, `radio-groups/`). Within each folder, create different variants like `Input.tsx`, `LongInput.tsx`, `AreaCheckbox.tsx` based on layout changes or additional elements alongside the base component. Use separate component files when there are structural differences; use Tailwind variant classes for simple style variations.
|