# 输入框 · JGuang UI

> 接收单行文本内容的基础输入控件。

- 页面: https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input
- 改编自: shadcn/ui 文档 (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
- 说明：正文保留英文原文。

> 示例 `input-demo`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/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/radix/input.json)


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


## Usage

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

```tsx
<Input />
```

## Basic


> 示例 `input-basic`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input


## Field

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


> 示例 `input-field`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input


## Field Group

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


> 示例 `input-fieldgroup`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input


## Disabled

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


> 示例 `input-disabled`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/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.


> 示例 `input-invalid`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input


## File

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


> 示例 `input-file`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input


## Inline

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


> 示例 `input-inline`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input


## Grid

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


> 示例 `input-grid`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input


## Required

Use the `required` attribute to indicate required inputs.


> 示例 `input-required`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input


## Badge

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


> 示例 `input-badge`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/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.


> 示例 `input-input-group`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/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.


> 示例 `input-button-group`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input


## Form

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


> 示例 `input-form`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input


## RTL

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


> 示例 `input-rtl`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt