Input
Form ControlsText input field accepting all native <input> HTML attributes. Pair with Label, Form, or InputGroup for complete form controls.
import { Input } from "@cohere-ai/waypoint-ui/input";Live Preview
Props
| Name | Type | Default | Description |
|---|---|---|---|
type | string | 'text' | Input type (text, email, password, number, etc.) |
disabled | boolean | false | Disables the input |
placeholder | string | - | Placeholder text |
Examples
Basic Input
Simple text input
1 import { Input } from '@cohere-ai/waypoint-ui/input'; 2 3 <Input type="text" placeholder="Enter your name" />
Input with Label
Email input paired with a Label
1 import { Input } from '@cohere-ai/waypoint-ui/input'; 2 import { Label } from '@cohere-ai/waypoint-ui/label'; 3 4 <div className="flex flex-col gap-1.5"> 5 <Label htmlFor="email">Email</Label> 6 <Input id="email" type="email" placeholder="you@example.com" /> 7 </div>
Additional Resources
Performance
Metrics measured with production build in Chrome 120.
Accessibility
Keyboard Navigation
Tab to focus, type to enter text.
ARIA Attributes
aria-labelaria-describedby (for error messages)aria-invalid (for validation)Note: Always associate inputs with labels using htmlFor/id.
Design Guidelines
Do
Always provide clear, descriptive labels for inputs.
Use appropriate input types for better mobile keyboards and validation.
Don't
Use placeholder text as a replacement for labels.
Show error messages before the user has finished typing.
Found an Issue?
If you've encountered a bug or have feedback about the Input component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.