import { Field, Input } from "@chakra-ui/react"
const Demo = () => {
return (
<Field.Root>
<Field.Label>Email</Field.Label>
<Input placeholder="me@example.com" />
</Field.Root>
)
}
用法
import { Field } from "@chakra-ui/react"<Field.Root>
<Field.Label>
<Field.RequiredIndicator />
</Field.Label>
<Input />
<Field.HelperText />
<Field.ErrorText />
</Field.Root>信息
如果您更喜欢封闭组件组合，请查看下方代码片段。示例
错误文本
将 invalid 属性传递给 Field.Root，并使用 Field.ErrorText 来指示字段无效。
这是一条错误文本
import { Field, Input } from "@chakra-ui/react"
const Demo = () => {
return (
<Field.Root invalid>
<Field.Label>Email</Field.Label>
<Input placeholder="me@example.com" />
<Field.ErrorText>This is an error text</Field.ErrorText>
</Field.Root>
)
}
帮助文本
使用 Field.HelperText 为字段添加帮助文本。
这是一条帮助文本
import { Field, Input } from "@chakra-ui/react"
const Demo = () => {
return (
<Field.Root>
<Field.Label>Email</Field.Label>
<Input placeholder="me@example.com" />
<Field.HelperText>This is a helper text</Field.HelperText>
</Field.Root>
)
}
水平排列
使用 orientation="horizontal" 属性可水平对齐标签和输入框。
import { Field, Input, Stack, Switch } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="8" maxW="sm" css={{ "--field-label-width": "96px" }}>
<Field.Root orientation="horizontal">
<Field.Label>Name</Field.Label>
<Input placeholder="John Doe" flex="1" />
</Field.Root>
<Field.Root orientation="horizontal">
<Field.Label>Email</Field.Label>
<Input placeholder="me@example.com" flex="1" />
</Field.Root>
<Field.Root orientation="horizontal">
<Field.Label>Hide email</Field.Label>
<Switch.Root>
<Switch.HiddenInput />
<Switch.Control />
</Switch.Root>
</Field.Root>
</Stack>
)
}
禁用
使用 disabled 属性可禁用该字段。
import { Field, Input } from "@chakra-ui/react"
const Demo = () => {
return (
<Field.Root disabled>
<Field.Label>Email</Field.Label>
<Input placeholder="me@example.com" />
</Field.Root>
)
}
文本域
以下是 Field 组件与文本域的用法。
import { Field, Textarea } from "@chakra-ui/react"
const Demo = () => {
return (
<Field.Root>
<Field.Label>Email</Field.Label>
<Textarea placeholder="Email" />
</Field.Root>
)
}
原生选择框
以下是 Field 组件与原生选择框的用法。
import { Field, NativeSelect } from "@chakra-ui/react"
const Demo = () => {
return (
<Field.Root>
<Field.Label>Email</Field.Label>
<NativeSelect.Root>
<NativeSelect.Field>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</NativeSelect.Field>
<NativeSelect.Indicator />
</NativeSelect.Root>
</Field.Root>
)
}
必填
将 required 属性传递给 Field.Root，并使用 Field.RequiredIndicator 来指示字段是必填的。
import { Field, Input } from "@chakra-ui/react"
const Demo = () => {
return (
<Field.Root required>
<Field.Label>
Email
<Field.RequiredIndicator />
</Field.Label>
<Input placeholder="me@example.com" />
</Field.Root>
)
}
可选
将 fallback 属性传递给 Field.RequiredIndicator 以添加可选文本。
import { Badge, Field, Input } from "@chakra-ui/react"
const Demo = () => {
return (
<Field.Root>
<Field.Label>
Email
<Field.RequiredIndicator
fallback={
<Badge size="xs" variant="surface">
Optional
</Badge>
}
/>
</Field.Label>
<Input placeholder="me@example.com" />
</Field.Root>
)
}
封闭组件
以下是为封闭组件组合设置 Field 的方法。
import { Field as ChakraField } from "@chakra-ui/react"
import * as React from "react"
export interface FieldProps extends Omit<ChakraField.RootProps, "label"> {
label?: React.ReactNode
helperText?: React.ReactNode
errorText?: React.ReactNode
optionalText?: React.ReactNode
}
export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
function Field(props, ref) {
const { label, children, helperText, errorText, optionalText, ...rest } =
props
return (
<ChakraField.Root ref={ref} {...rest}>
{label && (
<ChakraField.Label>
{label}
<ChakraField.RequiredIndicator fallback={optionalText} />
</ChakraField.Label>
)}
{children}
{helperText && (
<ChakraField.HelperText>{helperText}</ChakraField.HelperText>
)}
{errorText && (
<ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
)}
</ChakraField.Root>
)
},
)
如果您想自动将封闭组件添加到您的项目中，请运行该命令
npx @chakra-ui/cli snippet add field属性
Root
| 属性 | 默认值 | 类型 |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'组件的调色板 |
orientation | 'vertical' | 'vertical' | 'horizontal'组件的方向 |
asChild | ||
disabled | boolean指示字段是否被禁用。 | |
ids | ElementIds字段部分的ID。 | |
invalid | boolean指示字段是否无效。 | |
readOnly | boolean指示字段是否只读。 | |
required | boolean指示字段是否为必填项。 | |
as | React.ElementType要渲染的底层元素。 | |
unstyled | boolean是否移除组件的样式。 |