@ chakra-ui/形式控制

窗体控制组件用于管理窗体控制此类输入字段, 复选框和无线电按钮。 它提供了让你 默认可访问的窗体字段.

• 窗体控制 - 提供上下文的顶层组件.
• 窗体标签 - 可见窗体控制标签.
• 窗体帮助文本 - 窗体控件用于引导用户的辅助文本. 如果添加,则会隐藏在球场出错时.
• 窗体错误 - 窗体控件的错误反馈。 如果有人帮忙 当控件无效时可见文本,它将替换帮助文本,改为 防止内容转移.
• 窗体错误 - 显示色盲错误状态的图标 用户.

安装

yarn add @chakra-ui/form-control

# or

npm install @chakra-ui/form-control

导入组件

import {
  FormControl,
  FormLabel,
  FormErrorMessage,
  FormHelperText,
  FormErrorIcon,
} from "@chakra-ui/form-control"

基本用途

这个 FormControl 组件自动提供 id 用于输入 组件将完全无障碍.

输入

<FormControl>
  // automatically gets `htmlFor`
  <FormLabel>First name:</FormLabel>
  // automatically gets `id` and `aria-*` properties
  <Input placeholder="Enter your first name..." />
  // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`
  <FormHelperText>Keep your first name short</FormHelperText>
  // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`
  <FormErrorMessage>First name is invalid</FormErrorMessage>
</FormControl>

带有复选框组

<FormControl as="fieldset">
  <FormLabel as="legend">Who is better:</FormLabel>
  <CheckboxGroup>
    <Checkbox>Naruto</Checkbox>
    <Checkbox>Boruto</Checkbox>
  </CheckboxGroup>
  <FormErrorMessage>C'mon! You must select one</FormErrorMessage>
</FormControl>

焦点、残疾和残疾国家

• 当 Input 部分接收焦点,通知 FormControl 财务报告和审定财务报表 添加 data-focus 编辑 FormLabel简单通过 _focus 页:1 FormLabel 以样式显示此状态.

• 若为 isInvalid 传递到 FormControl它会通知 Input 财务报告和审定财务报表 添加 data-invalid 页:1 FormLabel 因此,你可以改变样式 标签.

• 若为 isDisabled 传递到 FormControl,它让 Input 残疾, 添加 data-disabled 页:1 FormLabel 因此,你可以改变样式 标签.

更改所需指标

修改除以下各项之外的必要指标: FormLabel,简单通过 requiredIndicator 设置到您的自定义指标组件.

<FormControl as="fieldset">
  <FormLabel as="legend" requiredIndicator={CustomIndicator}>
    Who is better:
  </FormLabel>
  <CheckboxGroup>
    <Checkbox>Naruto</Checkbox>
    <Checkbox>Boruto</Checkbox>
  </CheckboxGroup>
  <FormErrorMessage>C'mon! You must select one</FormErrorMessage>
</FormControl>

添加视觉图标

<FormControl
  label="Tell us about yourself:"
  helpText="Keep it short and sweet!"
  errorText="C'mon! You must select one"
>
  <InputGroup>
    <Input paddingRight="32px" />
    <InputRightElement>
      <FormErrorIcon />
    </InputRightElement>
  </InputGroup>
</FormControl>