投入

输入组件是用于在文本字段中获取用户输入的组件.

安装

yarn add @chakra-ui/input

# or

npm i @chakra-ui/input

导入组件

import {
  Input,
  InputGroup,
  InputAddon,
  InputLeftAddon,
  InputRightAddon,
  InputElement,
  InputLeftElement,
  InputRightElement,
} from "@chakra-ui/input"

使用量

<Input placeholder="A simple input component" />

已禁用

通过 isDisabled 将输入输入到残疾状态.

<Input isDisabled placeholder="A disabled input" />

无效

通过 isInvalid 在无效状态下输入的道具 .

<Input isInvalid placeholder="An invalid input" />

只读

通过 isReadOnly prop 以只读状态获得输入 .

<Input isReadOnly placeholder="An invalid input" />

大小

通过 size 改变输入大小的道具。 Chakra UI 输入大小 值为: sm, (中文(简体) ), md 财务报告和审定财务报表 lg。输入组件的大小是 md 以 默认.

<>
  <Input size="sm" marginBottom="1rem" placeholder="A simple placeholder" />

  <Input size="md" marginBottom="1rem" placeholder="A simple placeholder" />

  <Input size="lg" placeholder="A simple placeholder" />
</>

备选案文

通过 variant 道克来改变输入组件的视觉外观. Chakra UI 输入变体类型为: outline, (中文(简体) ), filled, (中文(简体) ), flushed 财务报告和审定财务报表 unstyled。 。 。 .

<>
  <Input variant="outline" placeholder="Outline" marginBottom="1rem" />
  <Input variant="filled" placeholder="Filled" marginBottom="1rem" />
  <Input variant="flushed" placeholder="Flushed" marginBottom="1rem" />
  <Input variant="unstyled" placeholder="Unstyled" />
</>

输入加词

附加或附加元素, 通常是输入的标签或按钮 组件.

<>
  <InputGroup>
    <InputLeftAddon children="+234" />
    <Input borderLeftRadius="0" placeholder="Phone number..." />
  </InputGroup>

  <br />

  <InputGroup size="sm">
    <InputLeftAddon children="https://" />
    <Input borderRadius="0" placeholder="website.com" />
    <InputRightAddon children=".com" />
  </InputGroup>
</>

输入自定义元素

<InputGroup>
  <InputLeftElement children={"P"} />
  <Input type="tel" placeholder="Phone number" />
</InputGroup>