Components
Input & field
50px fields with slate borders, restrained shadows, and persistent labels.
Use your work email.
Enter a valid contact number.
Interactive local example · fictional data
The Code tab contains this preview’s complete source, including sample data and interaction state. Load the package stylesheet and Switzer font as described in the installation guide. Additional layout utilities require Tailwind CSS in your application.
API reference
| Prop | Type | Default |
|---|---|---|
| Input props | Native input props + ref | — |
| Field.id / label | string (required) | — |
| Field.error / hint | string | — |
| Field.required | boolean | false |
Primitives also accept their underlying HTML or Radix props. Full types are included with the package.
Behavior & accessibility
- Field connects labels and descriptions to its child control.
- PasswordInput exposes its visibility toggle to assistive technology.
Reference
Sign-in and business settings