• Docs
  • Blog

    • 0.24.0

    • Switch to dark mode
    Get Started
    Components
    Styling
    Theming

    Concepts

    OverviewCompositionTesting

    Layout

    Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridLink OverlayScrollableStackWrap

    Components

    AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

    Utilities

    Feature FlagsForLocal StoragePortalShowsplitPropsTheme

    Radio

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

    • npm
    • source
    • recipe
    • Ark
    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.

    Orientation

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

    Sizes

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

    Primitives

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

    ComponentDescription
    RadioGroupRootThe context provider for the RadioGroup parts
    RadioGroupLabelThe label of the radio
    RadioGroupIndicatorThe indicator of the radio state
    RadioGroupItemThe container of the label and control of the radio
    RadioGroupItemTextThe label for a single radio
    RadioGroupItemControlThe visual input of a single radio
    RadioGroupItemHiddenInputThe native input for the radio

    API

    Props

    RadioGroup

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

    NameDefaultDescription
    orientationhorizontalThis 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:

    NameDefaultDescription
    sizesmThe 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.

    NameDescription
    RootThe RadioGroupRoot component which is the Provider for the family.
    LabelThe RadioGroupLabel component which displays the label and "required" notice.
    IndicatorThe RadioGroupIndicator component which displays based on the checked state.
    ItemThe RadioGroupItem component which is the container to a single radio item.
    ItemTextThe RadioGroupItemText component which is the label of the radio.
    ItemControlThe RadioGroupItemControl component which is the visual field.
    HiddenInputThe RadioGroupHiddenInput component which displays the native input.

    On this page

    • Edit this page on Github
    Cerberus Design System | Docs