Radio
Radio is a component used for allowing users to select one option from multiple choices.
<RadioGroup.Root>
<RadioGroup.Item value="1">織田信長</RadioGroup.Item>
<RadioGroup.Item value="2">豊臣秀吉</RadioGroup.Item>
<RadioGroup.Item value="3">徳川家康</RadioGroup.Item>
</RadioGroup.Root>
Usage
import { Radio, RadioGroup } from "@yamada-ui/react"
import { Radio, RadioGroup } from "@/components/ui"
import { Radio, RadioGroup } from "@workspaces/ui"
<RadioGroup.Root>
<RadioGroup.Item />
</RadioGroup.Root>
Use Items
const items = useMemo<RadioGroup.RootProps["items"]>(
() => [
{ label: "織田信長", value: "1" },
{ label: "豊臣秀吉", value: "2" },
{ label: "徳川家康", value: "3" },
],
[],
)
return <RadioGroup.Root items={items} />
Change Variant
const items = useMemo<RadioGroup.RootProps["items"]>(
() => [
{ label: "Checked", value: "1" },
{ label: "No checked", value: "2" },
],
[],
)
return (
<VStack>
<For each={["solid", "subtle", "surface", "outline"]}>
{(variant, index) => (
<RadioGroup.Root
key={variant}
variant={variant}
defaultValue="1"
items={items}
/>
)}
</For>
</VStack>
)
Change Size
const items = useMemo<RadioGroup.RootProps["items"]>(
() => [
{ label: "Checked", value: "1" },
{ label: "No checked", value: "2" },
],
[],
)
return (
<VStack>
<For each={["sm", "md", "lg"]}>
{(size, index) => (
<RadioGroup.Root
key={size}
size={size}
defaultValue="1"
items={items}
/>
)}
</For>
</VStack>
)
Set Default Value
To set a default value, set defaultValue to a value.
const items = useMemo<RadioGroup.RootProps["items"]>(
() => [
{ label: "織田信長", value: "1" },
{ label: "豊臣秀吉", value: "2" },
{ label: "徳川家康", value: "3" },
],
[],
)
return <RadioGroup.Root defaultValue="1" items={items} />
Default Checked
To default checked, set defaultChecked to true.
const items = useMemo<RadioGroup.RootProps["items"]>(
() => [
{ defaultChecked: true, label: "織田信長", value: "1" },
{ label: "豊臣秀吉", value: "2" },
{ label: "徳川家康", value: "3" },
],
[],
)
return <RadioGroup.Root items={items} />
Change Direction
To change the direction, set orientation to "horizontal" or "vertical". The default is "vertical".
const items = useMemo<RadioGroup.RootProps["items"]>(
() => [
{ label: "織田信長", value: "1" },
{ label: "豊臣秀吉", value: "2" },
{ label: "徳川家康", value: "3" },
],
[],
)
return <RadioGroup.Root items={items} orientation="horizontal" />
Change Shape
To change the shape, set shape to "circle", "square" or "rounded". The default is "circle".
const items = useMemo<RadioGroup.RootProps["items"]>(
() => [
{ label: "織田信長", value: "1" },
{ label: "豊臣秀吉", value: "2" },
{ label: "徳川家康", value: "3" },
],
[],
)
return (
<VStack>
<For each={["circle", "square", "rounded"]}>
{(shape) => (
<RadioGroup.Root
key={shape}
defaultValue="1"
shape={shape}
items={items}
/>
)}
</For>
</VStack>
)
Disable
To disable, set disabled to true.
<RadioGroup.Root>
<For each={["solid", "subtle", "surface", "outline"]}>
{(variant) => (
<RadioGroup.Item key={variant} variant={variant} disabled>
{toTitleCase(variant)}
</RadioGroup.Item>
)}
</For>
</RadioGroup.Root>
Read-Only
To read-only, set readOnly to true.
<RadioGroup.Root>
<For each={["solid", "subtle", "surface", "outline"]}>
{(variant) => (
<RadioGroup.Item key={variant} variant={variant} readOnly defaultChecked>
{toTitleCase(variant)}
</RadioGroup.Item>
)}
</For>
</RadioGroup.Root>
Invalid
To make invalid, set invalid to true.
<RadioGroup.Root>
<For each={["solid", "subtle", "surface", "outline"]}>
{(variant) => (
<RadioGroup.Item key={variant} variant={variant} invalid>
{toTitleCase(variant)}
</RadioGroup.Item>
)}
</For>
</RadioGroup.Root>
Change Border Color
To change the border color, set focusBorderColor or errorBorderColor to a color value.
<RadioGroup.Root>
<RadioGroup.Item value="1">Default border color</RadioGroup.Item>
<RadioGroup.Item focusBorderColor="green.500" value="2">
Custom border color
</RadioGroup.Item>
<RadioGroup.Item errorBorderColor="orange.500" invalid value="3">
Custom border color
</RadioGroup.Item>
</RadioGroup.Root>
Control
const [value, setValue] = useState("1")
const items = useMemo<RadioGroup.RootProps["items"]>(
() => [
{ label: "織田信長", value: "1" },
{ label: "豊臣秀吉", value: "2" },
{ label: "徳川家康", value: "3" },
],
[],
)
return <RadioGroup.Root items={items} value={value} onChange={setValue} />
If you use this code, you need to add
"use client" to the top of the file.Use Custom Component
const { getInputProps, getLabelProps, getRootProps } = useRadioGroup({
defaultValue: "1",
})
const CustomRadio = ({ children, ...rest }) => {
return (
<Box
as="label"
css={{
"&:has(input:checked)": {
bg: "colorScheme.solid",
borderColor: "colorScheme.solid",
color: "colorScheme.contrast",
},
alignItems: "center",
borderWidth: "1px",
display: "flex",
h: "10",
px: "3",
rounded: "l2",
}}
{...getLabelProps()}
>
<Box as="input" {...getInputProps(rest)} />
{children}
</Box>
)
}
return (
<HStack {...getRootProps()}>
<CustomRadio value="1">織田信長</CustomRadio>
<CustomRadio value="2">豊臣秀吉</CustomRadio>
<CustomRadio value="3">徳川家康</CustomRadio>
</HStack>
)
If you use this code, you need to add
"use client" to the top of the file.Props
Accessibility
Currently, this section is being updated due to the migration of v2.