import {
Button,
Field,
Fieldset,
For,
Input,
NativeSelect,
Stack,
} from "@chakra-ui/react"
const Demo = () => {
return (
<Fieldset.Root size="lg" maxW="md">
<Stack>
<Fieldset.Legend>Contact details</Fieldset.Legend>
<Fieldset.HelperText>
Please provide your contact details below.
</Fieldset.HelperText>
</Stack>
<Fieldset.Content>
<Field.Root>
<Field.Label>Name</Field.Label>
<Input name="name" />
</Field.Root>
<Field.Root>
<Field.Label>Email address</Field.Label>
<Input name="email" type="email" />
</Field.Root>
<Field.Root>
<Field.Label>Country</Field.Label>
<NativeSelect.Root>
<NativeSelect.Field name="country">
<For each={["United Kingdom", "Canada", "United States"]}>
{(item) => (
<option key={item} value={item}>
{item}
</option>
)}
</For>
</NativeSelect.Field>
<NativeSelect.Indicator />
</NativeSelect.Root>
</Field.Root>
</Fieldset.Content>
<Button type="submit" alignSelf="flex-start">
Submit
</Button>
</Fieldset.Root>
)
}
用法
¥Usage
import { Fieldset } from "@chakra-ui/react"<Fieldset.Root>
<Fieldset.Legend />
<Fieldset.Content />
</Fieldset.Root>示例
¥Examples
已禁用
¥Disabled
使用 disabled 属性禁用字段集，从而禁用字段集中的所有输入元素。
¥Use the disabled prop to disable the fieldset to disable all input elements
within the fieldset.
import {
Field,
Fieldset,
For,
Input,
NativeSelect,
Textarea,
} from "@chakra-ui/react"
const Demo = () => {
return (
<Fieldset.Root size="lg" disabled>
<Fieldset.Legend>Shipping details</Fieldset.Legend>
<Field.Root>
<Field.Label>Street address</Field.Label>
<Input name="address" />
</Field.Root>
<Field.Root>
<Field.Label>Country</Field.Label>
<NativeSelect.Root>
<NativeSelect.Field name="country">
<For each={["United Kingdom", "Canada", "United States"]}>
{(item) => (
<option key={item} value={item}>
{item}
</option>
)}
</For>
</NativeSelect.Field>
<NativeSelect.Indicator />
</NativeSelect.Root>
</Field.Root>
<Field.Root>
<Field.Label>Delivery notes</Field.Label>
<Textarea name="notes" />
</Field.Root>
</Fieldset.Root>
)
}
无效
¥Invalid
使用 invalid 属性将字段集标记为无效。这将显示错误文本。
¥Use the invalid prop to mark the fieldset as invalid. This will show the error
text.
注意：你需要将 invalid 属性传递给 fieldset 中的 Field 组件，以使每个输入元素无效。
import {
Field,
Fieldset,
For,
Input,
NativeSelect,
Textarea,
} from "@chakra-ui/react"
const Demo = () => {
return (
<Fieldset.Root size="lg" invalid>
<Fieldset.Legend>Shipping details</Fieldset.Legend>
<Fieldset.Content>
<Field.Root>
<Field.Label>Street address</Field.Label>
<Input name="address" />
</Field.Root>
<Field.Root invalid>
<Field.Label>Country</Field.Label>
<NativeSelect.Root>
<NativeSelect.Field name="country">
<For each={["United Kingdom", "Canada", "United States"]}>
{(item) => (
<option key={item} value={item}>
{item}
</option>
)}
</For>
</NativeSelect.Field>
<NativeSelect.Indicator />
</NativeSelect.Root>
</Field.Root>
<Field.Root invalid>
<Field.Label>Notes</Field.Label>
<Textarea name="notes" />
</Field.Root>
</Fieldset.Content>
<Fieldset.ErrorText>
Some fields are invalid. Please check them.
</Fieldset.ErrorText>
</Fieldset.Root>
)
}
属性
¥Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
size | 'md' | 'sm' | 'md' | 'lg'The size of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. | |
invalid | booleanIndicates whether the fieldset is invalid. |