Concepts

Application

Buttons

Data display

Disclosure

Feedback

Layout

Media

Navigation

Overlay

Typography

Utilities

Radiomark

A visual indicator used to show selected and unselected states.

Recipe

import { HStack, Radiomark } from '@chakra-ui/react'

export const RadiomarkBasic = () => {
  return (
    <HStack gap="4">
      <Radiomark />
      <Radiomark checked />
    </HStack>
  )
}

Anatomy

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

<Radiomark checked />

Usage

Radiomark is the presentational dot used inside Radio and Radio Card. It renders a span and has no behavior of its own — it does not select, and it is not focusable.

Reach for it when you need the look of a radio without the interaction, for example to show the chosen option in a summary or inside a custom control where you manage state yourself. For anything a user can select, use Radio instead, so you get the input, label association and keyboard handling.

Examples

States

The component supports checked and unchecked states, each of which can be combined with disabled.

Default

Disabled

import { HStack, Radiomark, Stack, Text } from '@chakra-ui/react'

export const RadiomarkStates = () => {
  return (
    <Stack gap="4">
      <HStack gap="4">
        <Text textStyle="sm" color="fg.muted" width="20">
          Default
        </Text>
        <Radiomark />
        <Radiomark checked />
      </HStack>
      <HStack gap="4">
        <Text textStyle="sm" color="fg.muted" width="20">
          Disabled
        </Text>
        <Radiomark disabled />
        <Radiomark checked disabled />
      </HStack>
    </Stack>
  )
}

Variants

Use the variant prop to change the visual style.

import { For, HStack, Radiomark } from '@chakra-ui/react'

export const RadiomarkVariants = () => {
  return (
    <HStack gap="4">
      <For each={['solid', 'subtle', 'outline', 'inverted'] as const}>
        {(variant) => <Radiomark checked key={variant} variant={variant} />}
      </For>
    </HStack>
  )
}

Sizes

Use the size prop to change the size.

import { For, HStack, Radiomark } from '@chakra-ui/react'

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

Colors

Use the colorPalette prop to change the color scheme.

import { For, HStack, Radiomark } from '@chakra-ui/react'
import { colorPalettes } from '#lib/color-palettes'

export const RadiomarkWithColors = () => {
  return (
    <HStack gap="4" wrap="wrap">
      <For each={colorPalettes}>
        {(colorPalette) => (
          <Radiomark key={colorPalette} colorPalette={colorPalette} checked />
        )}
      </For>
    </HStack>
  )
}

Props

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'presence' \| 'status' \| 'sidebar' \| 'sidebar.accent' \| 'accent' \| 'slate'` 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` Whether the checkmark is checked
`disabled`		`boolean` Whether the checkmark is disabled

Introduction