Radiomark

A visual indicator used to show selected and unselected radio states

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

export default function RadiomarkBasic() {
  return (
    <Stack align="flex-start">
      <Radiomark />
      <Radiomark checked />
      <Radiomark disabled />
      <Radiomark checked disabled />
    </Stack>
  );
}

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.

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

export default function RadiomarkStates() {
  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 { Radiomark, Stack } from "chakra-ui-solid";
import { For } from "solid-js";

export default function RadiomarkVariants() {
  return (
    <Stack align="flex-start">
      <For each={["outline", "subtle", "solid", "inverted"] as const}>
        {(variant) => <Radiomark variant={variant} checked />}
      </For>
    </Stack>
  );
}

Sizes

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

import { HStack, Radiomark } from "chakra-ui-solid";
import { For } from "solid-js";

export default function RadiomarkWithSizes() {
  return (
    <HStack gap="4" align="center">
      <For each={["xs", "sm", "md", "lg"] as const}>
        {(size) => <Radiomark size={size} checked />}
      </For>
    </HStack>
  );
}

Colors

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

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

/**
 * The ten palettes written out, where the React version maps over a list.
 *
 * `colorPalette` is deliberately absent from the preset's `staticCss` — see the comment on it in
 * `packages/panda-preset/src/preset.ts` — so its rules come from Panda reading this file. A palette
 * it can only know at runtime reaches the element as a class with no rule, and every radiomark here
 * paints in the default colour with nothing to say so (`CLAUDE.md`, *The hazard*). The sizes and
 * variants on the pages either side of this one are safe to loop over for the opposite reason: a
 * recipe's variant values *are* pre-generated.
 */
export default function RadiomarkWithColors() {
  return (
    <HStack gap="4" wrap="wrap">
      <Radiomark colorPalette="gray" checked />
      <Radiomark colorPalette="red" checked />
      <Radiomark colorPalette="green" checked />
      <Radiomark colorPalette="blue" checked />
      <Radiomark colorPalette="teal" checked />
      <Radiomark colorPalette="pink" checked />
      <Radiomark colorPalette="purple" checked />
      <Radiomark colorPalette="cyan" checked />
      <Radiomark colorPalette="orange" checked />
      <Radiomark colorPalette="yellow" checked />
    </HStack>
  );
}

Filled

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

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

export default function RadiomarkWithFilled() {
  return (
    <HStack gap="4">
      <Radiomark variant="outline" />
      <Radiomark variant="outline" checked />
      <Radiomark variant="outline" filled />
      <Radiomark variant="outline" filled checked />
    </HStack>
  );
}

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'>` The circle's size, as a scale step.
`variant`	`'solid'`	`ConditionalValue<'solid' \| 'subtle' \| 'outline' \| 'inverted'>` 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 everything it inherits — 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.