输入框

安装

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

将以下代码复制到你的项目中。

View complete source: components/ui/input.tsx

根据项目配置更新导入路径。

用法

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.

按钮组

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.

从右到左布局

To enable RTL support in JGuang UI, see the RTL configuration guide.