Radiomark

A visual indicator used to show selected and unselected radio states

Usage

import { Radiomark } from "chakra-ui-solid";

<Radiomark checked />

Radiomark is the mark, not the control. It has no input behind it and nothing to click — a RadioGroup supplies the state and the label, and this is what it draws beside them.

Examples

States

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

Variants

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

Sizes

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

Colors

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

Filled

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

Props

RadiomarkProps
Prop	Default	Type
`checked`	—	`boolean` Whether the radiomark is checked — the dot is drawn only when it is.
`disabled`	—	`boolean` Whether the radiomark is disabled — dims it and takes the cursor with it.
`filled`	—	`ConditionalValue<boolean>` Give the circle an opaque background, so it covers whatever it sits on rather than letting it through. Meant for `variant="outline"`, which otherwise has no fill of its own.
`size`	`'md'`	`ConditionalValue<'xs' \| 'sm' \| 'md' \| 'lg' \| PresetVariant<'radiomark', 'size'>>` The circle's size, as a scale step.
`variant`	`'solid'`	`ConditionalValue<'solid' \| 'subtle' \| 'outline' \| 'inverted' \| PresetVariant<'radiomark', 'variant'>>` How the circle is painted once it is checked — `solid` fills it with the palette, `outline` and `inverted` only recolour the border, and `subtle` tints it. There is no `plain` here, where Checkmark has one.

Plus HTMLChakraProps<"span"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.