import { Radiomark, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack>
<Radiomark />
<Radiomark checked />
<Radiomark disabled />
<Radiomark checked disabled />
</Stack>
)
}
Usage
import { Radiomark } from "@chakra-ui/react"<Radiomark checked />Examples
States
The Radiomark component supports checked and unchecked states, with optional disabled state.
import { HStack, Radiomark } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap={4}>
<Radiomark />
<Radiomark checked />
<Radiomark disabled />
<Radiomark checked disabled />
</HStack>
)
}
Variants
Use the variant prop to change the visual style of the radiomark.
import { For, Radiomark, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack>
<For each={["outline", "subtle", "solid", "inverted"]}>
{(variant) => <Radiomark checked key={variant} variant={variant} />}
</For>
</Stack>
)
}
Sizes
Use the size prop to change the size of the radiomark.
import { For, HStack, Radiomark } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap={4} alignItems="center">
<For each={["xs", "sm", "md", "lg"]}>
{(size) => <Radiomark key={size} size={size} checked />}
</For>
</HStack>
)
}
Colors
Use the colorPalette prop to change the color scheme of the radiomark.
import { For, HStack, Radiomark } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
const Demo = () => {
return (
<HStack gap={4}>
<For each={colorPalettes}>
{(colorPalette) => (
<Radiomark key={colorPalette} colorPalette={colorPalette} checked />
)}
</For>
</HStack>
)
}
Filled
Use the filled prop with the outline variant to add a background color to
the radiomark.
import { HStack, Radiomark } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap={4}>
<Radiomark variant="outline" />
<Radiomark variant="outline" checked />
<Radiomark variant="outline" filled />
<Radiomark variant="outline" filled checked />
</HStack>
)
}