Components
Input
One line of text. Always with a label; errors say what went wrong and how to fix it.
Preview
Installation
It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.
npx shadcn@latest add inputExamples
States
Empty, filled and disabled.
Error
Say what went wrong and how to fix it, under the field.
Add the part after the @, like example.com.
File
Props
The ones that change how it looks or behaves. The rest are the HTML element's own.
| Prop | Type | Default |
|---|---|---|
| type | string | "text" |
| aria-invalid | boolean | false |
Guidelines
Use it
- A visible Label above it, tied by htmlFor and id.
- The error under the field, linked with aria-describedby.
Don't
- Use the placeholder as the label.
- Show an error before the person has finished typing.
Used in
The screens in this Base that show it, found in the code.
- Kickoff workshop: founder's view
- Settings: Account
- Settings: People
- Settings: Process
- Settings: Projects
- Sign in
- The app shell, on every screen
Accessibility
- Set aria-invalid on a field with an error so screen readers announce it.