Radiomark

A visual indicator used to show selected and unselected radio states

AI TipWant to skip the docs? Use the MCP Server

Usage

import { Radiomark } from "@chakra-ui/react"

<Radiomark checked />

The Radiomark component supports checked and unchecked states, with optional disabled state.

Use the variant prop to change the visual style of the radiomark.

Use the size prop to change the size of the radiomark.

Use the colorPalette prop to change the color scheme of the radiomark.

Use the filled prop with the outline variant to add a background color to the radiomark.

Prop	Default	Type
`colorPalette`	`gray`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`variant`	`solid`	`'solid' \| 'subtle' \| 'outline' \| 'inverted'` The variant of the component
`size`	`md`	`'xs' \| 'sm' \| 'md' \| 'lg'` The size of the component
`checked`		`boolean \| undefined` Whether the checkmark is checked
`disabled`		`boolean \| undefined` Whether the checkmark is disabled
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.