Radio

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

Props#

`aria-describedby`

Description

Refers to the id of the element that labels the radio element.

Type

string

`colorScheme`

Description

The visual color appearance of the component

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

Default

blue

`data-radiogroup`

Type

any

`defaultChecked`

Description

If true, the radio will be initially checked.

Type

boolean

Default

false

`id`

Description

id assigned to input

Type

string

`inputProps`

Description

Additional props to be forwarded to the input element

Type

InputHTMLAttributes<HTMLInputElement>

`isChecked`

Description

If true, the radio will be checked. You'll need to pass onChange to update its value (since it is now controlled)

Type

boolean

Default

false

`isDisabled`

Description

If true, the radio will be disabled

Type

boolean

Default

false

`isFocusable`

Description

If true and isDisabled is true, the radio will remain focusable but not interactive.

Type

boolean

Default

false

`isInvalid`

Description

If true, the radio button will be invalid. This also sets `aria-invalid` to true.

Type

boolean

Default

false

`isReadOnly`

Description

If true, the radio will be read-only

Type

boolean

Default

false

`isRequired`

Description

If true, the radio button will be required. This also sets `aria-required` to true.

Type

boolean

Default

false

`name`

Description

The name of the input field in a radio (Useful for form submission).

Type

string

`onChange`

Description

Function called when checked state of the input changes

Type

(event: ChangeEvent<HTMLInputElement>) => void

`size`

Description

The size of the Radio

Type

"md" | "lg" | "sm"

Default

md

`spacing`

Description

The spacing between the checkbox and its label text

Type

ResponsiveValue<string | number | (string & {})>

Default

0.5rem

`value`

Description

The value to be used in the radio button. This is the value that will be returned on form submission.

Type

string

`variant`

Description

The variant of the Radio

Type

string

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>
  );
}

Edit this page on GitHub