import { HStack, RadioGroup } from "@chakra-ui/react"
const Demo = () => {
return (
<RadioGroup.Root defaultValue="1">
<HStack gap="6">
{items.map((item) => (
<RadioGroup.Item key={item.value} value={item.value}>
<RadioGroup.ItemHiddenInput />
<RadioGroup.ItemIndicator />
<RadioGroup.ItemText>{item.label}</RadioGroup.ItemText>
</RadioGroup.Item>
))}
</HStack>
</RadioGroup.Root>
)
}
const items = [
{ label: "Option 1", value: "1" },
{ label: "Option 2", value: "2" },
{ label: "Option 3", value: "3" },
]
用法
import { RadioGroup } from "@chakra-ui/react"<RadioGroup.Root>
<RadioGroup.Item>
<RadioGroup.ItemHiddenInput />
<RadioGroup.ItemIndicator />
<RadioGroup.ItemText />
</RadioGroup.Item>
</RadioGroup.Root>信息
如果您喜欢封闭的组件组合，请查看下面的代码片段。示例
受控
将 value 和 onValueChange 属性传递给 RadioGroup.Root 组件，以控制所选的单选按钮。
"use client"
import { HStack, RadioGroup } from "@chakra-ui/react"
import { useState } from "react"
const Demo = () => {
const [value, setValue] = useState<string | null>(null)
return (
<RadioGroup.Root value={value} onValueChange={(e) => setValue(e.value)}>
<HStack gap="6">
{items.map((item) => (
<RadioGroup.Item key={item.value} value={item.value}>
<RadioGroup.ItemHiddenInput />
<RadioGroup.ItemIndicator />
<RadioGroup.ItemText>{item.label}</RadioGroup.ItemText>
</RadioGroup.Item>
))}
</HStack>
</RadioGroup.Root>
)
}
const items = [
{ label: "Option 1", value: "1" },
{ label: "Option 2", value: "2" },
{ label: "Option 3", value: "3" },
]
颜色
将 colorPalette 属性传递给 RadioGroup.Root 组件，以更改组件的配色方案。
灰
红
绿
蓝
青色
粉
紫
青
橙
黄
import { HStack, RadioGroup, Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
const Demo = () => {
return (
<Stack gap="2" align="flex-start">
{colorPalettes.map((colorPalette) => (
<HStack key={colorPalette} gap="10" px="4">
<Text minW="8ch">{colorPalette}</Text>
<RadioGroup.Root
colorPalette={colorPalette}
defaultValue="react"
spaceX="8"
>
{items.map((item) => (
<RadioGroup.Item key={item.value} value={item.value}>
<RadioGroup.ItemHiddenInput />
<RadioGroup.ItemIndicator />
<RadioGroup.ItemText>{item.label}</RadioGroup.ItemText>
</RadioGroup.Item>
))}
</RadioGroup.Root>
</HStack>
))}
</Stack>
)
}
const items = [
{ label: "React", value: "react" },
{ label: "Vue", value: "vue" },
{ label: "Solid", value: "solid" },
]
尺寸
将 size 属性传递给 RadioGroup.Root 组件，以更改单选按钮组件的尺寸。
import { For, HStack, RadioGroup } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="4">
<For each={["sm", "md", "lg"]}>
{(size) => (
<RadioGroup.Root size={size} key={size}>
<RadioGroup.Item value="react">
<RadioGroup.ItemHiddenInput />
<RadioGroup.ItemIndicator />
<RadioGroup.ItemText>Radio ({size})</RadioGroup.ItemText>
</RadioGroup.Item>
</RadioGroup.Root>
)}
</For>
</HStack>
)
}
变体
将 variant 属性传递给 RadioGroup.Root 组件，以更改单选按钮组件的外观。
import { For, HStack, RadioGroup, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="4">
<For each={["solid", "outline", "subtle"]}>
{(variant) => (
<RadioGroup.Root
key={variant}
variant={variant}
defaultValue="react"
colorPalette="teal"
>
<HStack gap="4">
<RadioGroup.Item value="react" minW="120px">
<RadioGroup.ItemHiddenInput />
<RadioGroup.ItemIndicator />
<RadioGroup.ItemText>React ({variant})</RadioGroup.ItemText>
</RadioGroup.Item>
<RadioGroup.Item value="vue">
<RadioGroup.ItemHiddenInput />
<RadioGroup.ItemIndicator />
<RadioGroup.ItemText>Vue ({variant})</RadioGroup.ItemText>
</RadioGroup.Item>
</HStack>
</RadioGroup.Root>
)}
</For>
</Stack>
)
}
禁用
将 disabled 属性传递给 RadioGroup.Item 组件，以禁用该单选按钮。
import { HStack, RadioGroup } from "@chakra-ui/react"
const Demo = () => {
return (
<RadioGroup.Root defaultValue="2">
<HStack gap="6">
{items.map((item) => (
<RadioGroup.Item
key={item.value}
value={item.value}
disabled={item.disabled}
>
<RadioGroup.ItemHiddenInput />
<RadioGroup.ItemIndicator />
<RadioGroup.ItemText>{item.label}</RadioGroup.ItemText>
</RadioGroup.Item>
))}
</HStack>
</RadioGroup.Root>
)
}
const items = [
{ label: "Option 1", value: "1" },
{ label: "Option 2", value: "2", disabled: true },
{ label: "Option 3", value: "3" },
]
Hook Form
使用 react-hook-form 中的 Controller 组件在表单中控制单选按钮组
"use client"
import { Button, Fieldset, HStack, RadioGroup } from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
const items = [
{ value: "1", label: "Option 1" },
{ value: "2", label: "Option 2" },
{ value: "3", label: "Option 3" },
]
const formSchema = z.object({
value: z.string({ message: "Value is required" }),
})
type FormValues = z.infer<typeof formSchema>
const Demo = () => {
const {
control,
handleSubmit,
formState: { errors },
} = useForm<FormValues>({
resolver: zodResolver(formSchema),
})
const onSubmit = handleSubmit((data) => console.log(data))
return (
<form onSubmit={onSubmit}>
<Fieldset.Root invalid={!!errors.value}>
<Fieldset.Legend>Select value</Fieldset.Legend>
<Controller
name="value"
control={control}
render={({ field }) => (
<RadioGroup.Root
name={field.name}
value={field.value}
onValueChange={({ value }) => {
field.onChange(value)
}}
>
<HStack gap="6">
{items.map((item) => (
<RadioGroup.Item key={item.value} value={item.value}>
<RadioGroup.ItemHiddenInput onBlur={field.onBlur} />
<RadioGroup.ItemIndicator />
<RadioGroup.ItemText>{item.label}</RadioGroup.ItemText>
</RadioGroup.Item>
))}
</HStack>
</RadioGroup.Root>
)}
/>
{errors.value && (
<Fieldset.ErrorText>{errors.value?.message}</Fieldset.ErrorText>
)}
<Button size="sm" type="submit" alignSelf="flex-start">
Submit
</Button>
</Fieldset.Root>
</form>
)
}
封闭组件
以下是为封闭组件组合设置 Radio 的方法。
import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react"
import * as React from "react"
export interface RadioProps extends ChakraRadioGroup.ItemProps {
rootRef?: React.RefObject<HTMLDivElement | null>
inputProps?: React.InputHTMLAttributes<HTMLInputElement>
}
export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
function Radio(props, ref) {
const { children, inputProps, rootRef, ...rest } = props
return (
<ChakraRadioGroup.Item ref={rootRef} {...rest}>
<ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
<ChakraRadioGroup.ItemIndicator />
{children && (
<ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>
)}
</ChakraRadioGroup.Item>
)
},
)
export const RadioGroup = ChakraRadioGroup.Root
如果您想自动将封闭组件添加到项目中，请运行此命令
npx @chakra-ui/cli snippet add radio以下是使用方法
<RadioGroup>
<Radio />
</RadioGroup>属性
根
| 属性 | 默认值 | 类型 |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'组件的配色方案 |
variant | 'solid' | 'outline' | 'subtle' | 'solid'组件的变体样式 |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg'组件的尺寸 |
asChild | ||
defaultValue | string单选按钮组首次渲染时的初始值。当您不需要控制单选按钮组的状态时使用。 | |
disabled | boolean如果为 `true`，则单选按钮组将被禁用 | |
form | string底层输入的关联表单。 | |
id | string机器的唯一标识符。 | |
ids | Partial<{ root: string label: string indicator: string item(value: string): string itemLabel(value: string): string itemControl(value: string): string itemHiddenInput(value: string): string }>单选按钮中元素的 ID。对于组合非常有用。 | |
name | string单选按钮中输入字段的名称（对于表单提交很有用）。 | |
onValueChange | (details: ValueChangeDetails) => void选中单选按钮时调用的函数 | |
orientation | 'horizontal' | 'vertical'单选按钮组的方向 | |
readOnly | boolean单选按钮是否只读 | |
value | string选中的单选按钮的值 |