laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
52 lines (36 loc) • 1.82 kB
Markdown
# TextArea
## Overview
Textarea with optional label wrapper and design-system focus/invalid styles. Accepts all native `<textarea>` props.
---
## Props
| Prop | Type | Default | Description |
| ---------------- | ---------------------------------- | ----------- | -------------------------------------------------------------------- |
| `label` | `React.ReactNode` | `undefined` | Optional label text/node above the textarea. |
| `labelClassName` | `string` | `undefined` | Classes for `Label`. |
| `wrpClassName` | `string` | `undefined` | Wrapper classes. |
| `id` | `string` | `auto` | If omitted and `label` is provided, an id is generated. |
| `...props` | `React.ComponentProps<'textarea'>` | — | All native textarea props (e.g., `rows`, `placeholder`, `disabled`). |
---
## Behavior
- **Auto id**: When `label` exists and `id` is not provided, an id is generated and linked via `Label htmlFor`.
- **Styling**: Uses DS tokens for border, focus ring, disabled, and invalid states (`aria-invalid`).
---
## Example
```tsx
import { Textarea } from "laif-ds";
export function Example() {
return (
<Textarea
label="Descrizione"
placeholder="Scrivi qui..."
defaultValue="Testo di esempio"
rows={4}
wrpClassName="w-[500px]"
/>
);
}
```
---
## Notes
- **Validation**: Add `aria-invalid` to reflect error state.
- **Resize**: Control with native CSS `resize` via `className` if needed.