🚧
Under Construction This component is a work-in-progress.
Text Area
An html multi-line text input field.
Current Status
- Standard html input
- Basic styling using Tailwind CSS
- Works as a controlled component when used within the Field component
Future
- Refactor to use Radix UI primitive
- Refactor to share styles and types with Input
- Add animations
- Add visual polish
- Improve responsive design for all common device sizes
- Add darkmode support
- Standardize color design token
Examples
TBD
How to use
Create component
Copy the code from the sandbox above and paste it into a new file (e.g. Input.tsx)
Make it controlled
Wrap with Field component to add control via React Hook Form:
yourform.tsx
<Field
name="example"
defaultValue={true}
>
<Field.GroupLabel>Group label text here:</Field.GroupLabel>
<Field.Control>
<TextArea size="standard" />
</Field.Control>
</Field>Setup defaultValues and zodSchema in Form
Details in Form component
Component API
| Required Prop | Type | Description |
|---|
| Optional Prop | Type | Description |
|---|---|---|
| size | "standard" | "large" | Size of input field. Defaults to standard. |