🚧
Under Construction This component is a work-in-progress.
Input
An html single-line 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
- 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>
<Input type="text" 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 |
|---|---|---|
| type | "text" | "email" | "tel" | "number" | Standard html input types. Defaults to text. |
| size | "standard" | "large" | Size of input field. Defaults to standard. |