Input
Single-line text field with integrated label and validation messaging.
Add it to your project
Eject the complete input group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject inputbash
npx toucan eject inputapp.tsx
import { Input } from '@/components/toucan/input';Use when
Users enter a short, single-line value.
Avoid when
The value needs multiple lines or a constrained option set.
Example
At least 8 characters
Username is already taken
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Input
Input
Props type: InputProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
description | string | undefined | No | Supporting text connected to the control. |
error | string | undefined | No | Validation error text or error state. |
hideLabel | boolean | undefined | No | Visually hide the label while keeping it available to assistive technology. |
label | string | undefined | No | Visible or accessible label for the control. |
required | boolean | undefined | No | Marks the control as required. |
size | "sm" | "md" | "lg" | undefined | No | Visual size variant. |
Also accepts the native size or input attributes that are not replaced by a Toucan prop.
Type exports
InputProps
Accessibility
- Labels, descriptions, required state, and errors are connected to the input.
Token families
inputfocus