Radio

The Radio component allows users to select one option from a set of choices.

import { RadioGroup, Radio, RadioParts } from '@cerberus/react'

Usage

The Radio component is a controlled component that can be used to select one option from a set. Simply wrap the Radio components in a RadioGroup component to create a group of radio buttons.

import { Radio, RadioGroup } from '@cerberus/react'

export function BasicDemo() {
  return (
    <RadioGroup defaultValue="cerberus">
      <Radio value="cerberus">Cerberus</Radio>
      <Radio value="hades">Hades</Radio>
      <Radio value="zeus">Zeus</Radio>
    </RadioGroup>
  )
}

Orientation

The RadioGroup component supports two orientations: horizontal, and vertical. The default orientation is horizontal.

import { Radio, RadioGroup } from '@cerberus/react'

export function OrientationDemo() {
  return (
    <RadioGroup defaultValue="cerberus" orientation="vertical">
      <Radio value="cerberus">Cerberus</Radio>
      <Radio value="hades">Hades</Radio>
      <Radio value="zeus">Zeus</Radio>
    </RadioGroup>
  )
}

Sizes

The Radio component supports two sizes: sm, and md. The default size is sm.

import { Radio, RadioGroup } from '@cerberus/react'

export function SizeDemo() {
  return (
    <RadioGroup defaultValue="cerberus">
      <Radio size="md" value="cerberus">Cerberus</Radio>
      <Radio size="md" value="hades">Hades</Radio>
      <Radio size="md" value="zeus">Zeus</Radio>
    </RadioGroup>
  )
}

Primitives

You can utilize the primitive components or the css prop to customize the radio.

Component	Description
RadioGroupRoot	The context provider for the RadioGroup parts
RadioGroupLabel	The label of the radio
RadioGroupIndicator	The indicator of the radio state
RadioGroupItem	The container of the label and control of the radio
RadioGroupItemText	The label for a single radio
RadioGroupItemControl	The visual input of a single radio
RadioGroupItemHiddenInput	The native input for the radio

import { RadioParts } from '@cerberus/react'

function CustomDemo() {
  return (
    <RadioParts.Root>
      <RadioParts.Item>
        <RadioParts.ItemText
          css={{
            textStyle: 'body-lg',
          }}
        >
          Cerberus
        </RadioParts.ItemText>
        <RadioParts.ItemControl
          css={{
            bgColor: 'info.bg.initial',
            h: 8,
            w: 8,
            transform: 'skew(-10deg)',
            _checked: {
              bg: 'warning.bg.initial',
            },
          }}
        />
        <RadioParts.ItemHiddenInput />
      </RadioParts.Item>
    </RadioParts.Root>
  )
}

API

Props

RadioGroup

The RadioGroup component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
orientation	`horizontal`	This orientation of the group.

The RadioGroup component also accepts all the props of the RadioGroupRoot primitive props

Radio

The Radio component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
size	`sm`	The size of the radio.

The Radio component also accepts all the props of the RadioGroupItem primitive props

Parts

The RadioParts API is an Object containing the full family of components.

Note

It is best to only use the RadioParts if you are building a custom solution. Importing Object based components will ship every property it includes into your bundle, regardless if you use it or not.

Name	Description
Root	The `RadioGroupRoot` component which is the Provider for the family.
Label	The `RadioGroupLabel` component which displays the label and "required" notice.
Indicator	The `RadioGroupIndicator` component which displays based on the `checked` state.
Item	The `RadioGroupItem` component which is the container to a single radio item.
ItemText	The `RadioGroupItemText` component which is the label of the radio.
ItemControl	The `RadioGroupItemControl` component which is the visual field.
HiddenInput	The `RadioGroupHiddenInput` component which displays the native input.

On this page