Pillar UI React Radio Component documentation

The Radio component is a simple radio input that allows users to select a single option from a list of options.

Components:

Radio

Type

Components

import

import { Pillar UI React Radio Component } from '@pillar-ui/core'
Go To radio Source CodeIssuesdiscussions

Usage

import { Radio } from '@pillar-ui/core'

function RadioColors() {
  return <Radio label="Option 1" />
}

Props

Label

The label prop is used to specify the text that appears next to the radio.

Example:

<Checkbox label="Option 1" />

Color

The color scheme to use for the radio button. Possible values are "primary", "secondary", "success", "warning", and "error". Defaults to "primary".

import { Flex, Radio } from '@pillar-ui/core'

export function RadioColors() {
  return (
    <div>
      <Flex gap="sm" items="center">
        <Radio color="dan" name="red" label="Red" />
        <Radio color="suc" name="green" label="Green" />
        <Radio color="war" name="orange" label="Orange" />
        <Radio color="pri" name="pri" label="Primary" />
        <Radio color="brown" name="brown" label="Brown" />
        <Radio color="bg" name="bg" label="Slate" />
        <Radio color="purple" name="purple" label="Purple" />
        <Radio color="sec" name="sec" label="Secondary" />
      </Flex>
    </div>
  )
}

Variant

The variant prop controls the visual appearance of the radio button by changing the way it is displayed when selected. It determines whether the radio button has a solid ring, an outline, or a soft background color when it is checked. This allows you to customize the look and feel of the radio button to better match the design of your application.

import { Flex, Radio } from '@pillar-ui/core'

export function RadioVariants() {
  return (
    <div className="l_f-md">
      <Flex gap="sm" items="center">
        <Radio color="dan" name="red" label="Red" />
        <Radio color="suc" name="green" label="Green" />
        <Radio color="war" name="orange" label="Orange" />
        <Radio color="pri" name="pri" label="Primary" />
        <Radio color="brown" name="brown" label="Brown" />
        <Radio color="bg" name="bg" label="Slate" />
        <Radio color="purple" name="purple" label="Purple" />
        <Radio color="sec" name="sec" label="Secondary" />
      </Flex>
      <Flex gap="sm" items="center">
        <Radio variant="outline" color="dan" name="red2" label="Red" />
        <Radio variant="outline" color="suc" name="green2" label="Green" />
        <Radio variant="outline" color="war" name="orange2" label="Orange" />
        <Radio variant="outline" color="pri" name="pri2" label="Primary" />
        <Radio variant="outline" color="brown" name="brown2" label="Brown" />
        <Radio variant="outline" color="bg" name="bg2" label="Slate" />
        <Radio variant="outline" color="purple" name="purple2" label="Purple" />
        <Radio variant="outline" color="sec" name="sec2" label="Secondary" />
      </Flex>
      <Flex gap="sm" items="center">
        <Radio variant="soft" color="dan" name="red3" label="Red" />
        <Radio variant="soft" color="suc" name="green3" label="Green" />
        <Radio variant="soft" color="war" name="orange3" label="Orange" />
        <Radio variant="soft" color="pri" name="pri3" label="Primary" />
        <Radio variant="soft" color="brown" name="brown3" label="Brown" />
        <Radio variant="soft" color="bg" name="bg3" label="Slate" />
        <Radio variant="soft" color="purple" name="purple3" label="Purple" />
        <Radio variant="soft" color="sec" name="sec3" label="Secondary" />
      </Flex>
    </div>
  )
}

Size

  • Type: string
  • Default: md
  • Options: 2xs | xs | sm | md | lg | xl | 2xl

The size of the radio button. Possible values are "2xs", "xs","sm", "md", "lg", "xl", '2xl'. Defaults to "md".

import { Flex, Radio } from '@pillar-ui/core'

export function RadioSizes() {
  return (
    <Flex gap="sm" items="center">
      <Radio size="3xs" name="red" label="Red" />
      <Radio size="2xs" name="green" label="Green" />
      <Radio size="xs" name="orange" label="Orange" />
      <Radio size="sm" name="pri" label="pri" />
      <Radio size="lg" name="bg" label="Slate" />
      <Radio size="3xl" name="sec" label="Secondary" />
    </Flex>
  )
}

State

The Radio component can be in several different states depending on its props:

export function RadioStates() {
  return (
    <div className="l_f-md">
      <Flex gap="sm" items="center">
        <Radio name="solid.default" label="Red" />
        <Radio name="solid.defaultChecked" label="Red" defaultChecked />
        <Radio name="solid.disabled" label="Red" disabled />
        <Radio name="solid.disabled-default" label="Red" disabled defaultChecked />
      </Flex>
      <Flex gap="sm" items="center">
        <Radio variant="soft" name="soft.default" label="Red" />
        <Radio variant="soft" name="soft.defaultChecked" label="Red" defaultChecked />
        <Radio variant="soft" name="soft.disabled" label="Red" disabled />
        <Radio variant="soft" name="soft.disabled-default" label="Red" disabled defaultChecked />
      </Flex>
      <Flex gap="sm" items="center">
        <Radio variant="outline" name="outline.default" label="Red" />
        <Radio variant="outline" name="outline.defaultChecked" label="Red" defaultChecked />
        <Radio variant="outline" name="outline.disabled" label="Red" disabled />
        <Radio variant="outline" name="outline.disabled-default" label="Red" disabled defaultChecked />
      </Flex>
    </div>
  )
}

use case

  • When a user has not yet completed a form, but some options are not applicable or not yet available. By disabling certain radio buttons, you can indicate to the user that these options are not currently selectable, while still providing a visual representation of all the available choices.

  • When presenting information that is read-only or cannot be changed by the user. In this case, the radio buttons can be disabled to indicate that they are not interactive, and are only there for informational purposes.

  • When presenting a set of options that are only available to certain users or under certain conditions. By disabling some radio buttons, you can clearly show which options are available and which are not.

  • When dealing with multi-step processes, you may want to disable certain options until the user has completed a previous step. This can help prevent errors and ensure that the user follows the correct sequence of steps.

  • When presenting options that require additional permissions or authorization. By disabling certain radio buttons, you can indicate to the user that these options are only available to certain users or under certain conditions.

Customization

The Radio component can be customized by passing a custom className or style prop. Additionally, you can create a custom Radio component by extending the base component and adding your own custom styles and functionality.