Input
Text input with focus ring, disabled state, and file input styling.
Install
Import path
Examples
File input
type="file" is styled to match the rest of the form controls.
Select a picture to upload.
Badge
Use Badge in the label to highlight a recommended field.
Basic
A text input component for forms and user data entry with built-in styling and accessibility features.
Disabled
Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.
This field is currently disabled.
Field
Use Field, FieldLabel, and FieldDescription to create an input with a label and description.
Choose a unique username for your account.
Field Group
Use FieldGroup to show multiple Field blocks and to build forms.
We'll send updates to this address.
Form
A full form example with multiple inputs, a select, and a button.
Grid
Use a grid layout to place multiple inputs side by side.
Inline
Use Field with orientation='horizontal' to create an inline input. Pair with Button to create a search input with a button.
Input Group
To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.
Invalid
Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the data-invalid attribute to the Field component.
This field contains validation errors.
Required
Use the required attribute to indicate required inputs.
This field must be filled out.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
مفتاح API الخاص بك مشفر ومخزن بأمان.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Input } from "@codefast/ui/input";
import { Label } from "@codefast/ui/label";
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" />
API reference
Props for each part of the component. All native element props are also forwarded.
Input
Renders a native <input>; forwards every native input prop.
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "text" | "email" | "password" | "file" | "number" | … | "text" | Native input type. file gets dedicated styling. |
| disabled | boolean | false | Dims the field and blocks interaction. |
| aria-invalid | boolean | false | Switches the field to the destructive error ring. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Moves focus to and from the input. |
- Always associate a Label via htmlFor / id so the field has an accessible name.
- Use aria-invalid plus a visible error message — colour alone is not sufficient.
- Describe the field with aria-describedby when you show helper or error text.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Give every input a visible label.
- Use the correct type so mobile keyboards and autofill behave well.
Don’t
- Don’t use placeholder text as a replacement for a label.
- Don’t disable a field when a read-only state would communicate intent better.