Radio

Radios are used when only one choice may be selected in a series of options.

Source Theme Source @chakra-ui/radio

Props#

The Radio component is a multipart component. The styling needs to be applied to each part specifically.

To learn more about styling multipart components, visit the Component Style page.

Anatomy#

A: control
B: label
C: container

Theming properties#

The properties that affect the theming of the Radio component are:

variant: The visual variant of the radio. The color scheme defaults to blue.
size: The size of the radio. Defaults to md.

Theming utilities#

createMultiStyleConfigHelpers: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyle and defineMultiStyleConfig).
definePartsStyle: a function used to create multipart style objects.
defineMultiStyleConfig: a function used to define the style configuration for a multipart component.

import { radioAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(radioAnatomy.keys)

Customizing the default theme#

import { radioAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(radioAnatomy.keys)

const baseStyle = definePartsStyle({
  // define the part you're going to style
  control: {
    borderRadius: '12px', // change the border radius
    borderColor: 'teal.500', // change the border color
  },
})

export const radioTheme = defineMultiStyleConfig({ baseStyle })

After customizing the radio theme, we can import it in our theme file and add it in the components property:

import { extendTheme } from '@chakra-ui/react'
import { radioTheme } from './components/radio.ts'

export const theme = extendTheme({
  components: { Radio: radioTheme },
})

This is a crucial step to make sure that any changes that we make to the radio theme are applied.

Adding a custom size#

Let's assume we want to include an extra large radio size. Here's how we can do that:

import { radioAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(radioAnatomy.keys)

const xl = defineStyle({
  w: '6',
  h: '6'
})

const sizes = {
  xl: definePartsStyle({ control: xl})
}

export const radioTheme = defineMultiStyleConfig({ sizes })

// Now we can use the new `xl` size
<Radio size="xl">This is a radio</Radio>

Every time you're adding anything new to the theme, you'd need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.

Adding a custom variant#

Let's assume we want to include a custom outline variant. Here's how we can do that:

import { radioAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(radioAnatomy.keys)

const outline = definePartsStyle({
  control: {
    border: '1px solid',
    borderColor: 'gray.300',

    // Let's also provide dark mode alternatives
    _dark: {
      borderColor: 'gray.600',
    },
  }

})

export const radioTheme = defineMultiStyleConfig({
  variants: { outline },
})

// Now we can use the new `outline` variant
<Radio variant="outline" ... />

Changing the default properties#

Let's assume we want to change the default size and variant of radio in our app. Here's how we can do that:

import { radioAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(
  radioAnatomy.keys,
)

export const radioTheme = defineMultiStyleConfig({
  defaultProps: {
    size: 'xl',
    variant: 'outline',
  },
})

// This saves you time, instead of manually setting the size and variant every time you use a radio:
<Radio size="xl" variant="outline">This is a radio</Radio>

Showcase#

import {
  ChakraProvider,
  Box,
  Radio,
  Heading,
  VStack,
} from '@chakra-ui/react';
import theme from './theme';
import { ColorModeSwitcher } from './ColorModeSwitcher';

export default function App() {
  return (
    <ChakraProvider theme={theme}>
      <Box position="relative" h="100vh" p={12}>
        <VStack spacing={4} alignItems="flex-start">
          <Radio>Styled Radio</Radio>
          <Radio size="xl">XL Radio</Radio>
          <Radio variant="groove">Custom Variant Radio</Radio>
          <Radio variant="groove" size="xl">Custom XL Variant Radio</Radio>
        </VStack>
        <ColorModeSwitcher aria-label="toggle theme" position="absolute" bottom={4} left={4} />
      </Box>
    </ChakraProvider>
  );
}

Open Sandbox

Edit this page on GitHub