# Input · JGuang UI

> A text input component for forms and user data entry with built-in styling and accessibility features.

- Page: https://jiguang132.com/systems/jguang-ui/docs/components/base/input
- Based on: shadcn/ui documentation (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c

> Example `input-demo`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input


## Installation


  

**Command**


  

**Manual**


```text
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](/r/jguang-ui/base/input.json)


### Update the import paths to match your project setup.


## Usage

```tsx
import { Input } from "@/components/ui/input"
```

```tsx
<Input />
```

## Basic


> Example `input-basic`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input


## Field

Use `Field`, `FieldLabel`, and `FieldDescription` to create an input with a
label and description.


> Example `input-field`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input


## Field Group

Use `FieldGroup` to show multiple `Field` blocks and to build forms.


> Example `input-fieldgroup`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input


## Disabled

Use the `disabled` prop to disable the input. To style the disabled state, add the `data-disabled` attribute to the `Field` component.


> Example `input-disabled`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input


## 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.


> Example `input-invalid`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input


## File

Use the `type="file"` prop to create a file input.


> Example `input-file`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input


## Inline

Use `Field` with `orientation="horizontal"` to create an inline input.
Pair with `Button` to create a search input with a button.


> Example `input-inline`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input


## Grid

Use a grid layout to place multiple inputs side by side.


> Example `input-grid`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input


## Required

Use the `required` attribute to indicate required inputs.


> Example `input-required`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input


## Badge

Use `Badge` in the label to highlight a recommended field.


> Example `input-badge`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input


## Input Group

To add icons, text, or buttons inside an input, use the `InputGroup` component. See the [Input Group](/systems/jguang-ui/docs/components/base/input-group) component for more examples.


> Example `input-input-group`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input


## Button Group

To add buttons to an input, use the `ButtonGroup` component. See the [Button Group](/systems/jguang-ui/docs/components/base/button-group) component for more examples.


> Example `input-button-group`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input


## Form

A full form example with multiple inputs, a select, and a button.


> Example `input-form`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input


## RTL

To enable RTL support in JGuang UI, see the [RTL configuration guide](/systems/jguang-ui/docs/rtl).


> Example `input-rtl`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input

---

Index of all JGuang resources: https://jiguang132.com/llms.txt