Radio

Radio buttons let people select one option from a set of options

1
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.

CerberusHadesZeus

Orientation

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

CerberusHadesZeus

Sizes

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

CerberusHadesZeus

Primitives

You can utilize the primitive components 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

Cerberus

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.

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.

1
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.

CerberusHadesZeus

Orientation

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

CerberusHadesZeus

Sizes

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

CerberusHadesZeus

Primitives

You can utilize the primitive components 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

Cerberus

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.

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.

1
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.

CerberusHadesZeus

Orientation

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

CerberusHadesZeus

Sizes

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

CerberusHadesZeus

Primitives

You can utilize the primitive components 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

Cerberus

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.

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.

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

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

Cerberus

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.

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.