Input
A text input component for forms and user data entry with built-in styling and accessibility features.
Installation
Command
Manual
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
Copy and paste the following code into your project.
View complete source: components/ui/input.tsx
Update the import paths to match your project setup.
Usage
import { Input } from "@/components/ui/input"
<Input />
Basic
Field
Use Field, FieldLabel, and FieldDescription to create an input with a
label and description.
Field Group
Use FieldGroup to show multiple Field blocks and to build forms.
Disabled
Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.
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.
File
Use the type="file" prop to create a file input.
Inline
Use Field with orientation="horizontal" to create an inline input.
Pair with Button to create a search input with a button.
Grid
Use a grid layout to place multiple inputs side by side.
Required
Use the required attribute to indicate required inputs.
Badge
Use Badge in the label to highlight a recommended field.
Input Group
To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.
Button Group
To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.
Form
A full form example with multiple inputs, a select, and a button.
RTL
To enable RTL support in JGuang UI, see the RTL configuration guide.
Source: components/base/input.mdx
Technical documentation for JGuang UI.