Skip to main content

Radio

Radio​

The Radio component provides a customizable radio button with support for labels, badges, and various states. It also includes a Radio.Card subcomponent for use within card layouts.

Usage:

import React from 'react';
import Radio from 'blendx-ui/Radio';

const MyRadio = () => (
  <Radio
    checked={true}
    label="Select Option"
    sublabel="(required)"
    badge="New"
    description="Please select an option."
    onChange={(checked, name) => console.log(checked, name)}
  />
);

export default MyRadio;

Props:

  • checked (bool): Indicates whether the radio button is checked. Default is false.
  • onChange (func): Callback function that is triggered when the radio button state changes. Receives the new checked state and the name of the radio button.
  • inputRef (func | object): A ref to the underlying input element.
  • label (string): The main label text for the radio button.
  • sublabel (string): Optional sublabel text displayed alongside the main label.
  • badge (string): Optional badge text that appears next to the label.
  • className (string): Additional CSS class names for styling.
  • position (string): Position of the checkmark relative to the label ('right' or left by default).
  • description (string): Optional description text displayed below the radio button.
  • link (string): Optional link text that appears below the radio button description.

Example:

<Radio
  checked={true}
  label="Option A"
  badge="Featured"
  description="This option is featured."
  onChange={(checked, name) => console.log('Checked:', checked)}
/>

Radio.Card​

The Radio.Card component is a variant of the Radio component that is displayed within a card layout, making it suitable for use in card-based designs.

Usage:

import React from 'react';
import Radio from 'blendx-ui/Radio';

const MyRadioCard = () => (
  <Radio.Card
    checked={true}
    label="Select Item"
    image="https://via.placeholder.com/150"
    badge="Featured"
    description="This is an important item."
    onChange={(checked, name) => console.log(checked, name)}
  />
);

export default MyRadioCard;

Props:

  • checked (bool): Indicates whether the radio button is checked. Default is false.
  • onChange (func): Callback function that is triggered when the radio button state changes. Receives the new checked state and the name of the radio button.
  • inputRef (func | object): A ref to the underlying input element.
  • label (string): The main label text for the radio button.
  • sublabel (string): Optional sublabel text displayed alongside the main label.
  • badge (string): Optional badge text that appears next to the label.
  • image (string): URL of the image to be displayed in the card.
  • className (string): Additional CSS class names for styling.
  • description (string): Optional description text displayed below the radio button.
  • disabled (bool): If true, the radio button and card are disabled.

Example:

<Radio.Card
  checked={true}
  label="Premium Feature"
  image="https://via.placeholder.com/150"
  badge="Exclusive"
  description="Unlock this premium feature with a subscription."
  onChange={(checked, name) => console.log('Checked:', checked)}
  disabled={false}
/>

Notes:

  • The Radio component is the default export and can be used directly.
  • The Radio.Card component is a subcomponent of Radio and should be accessed via Radio.Card.

Re-exported Components:

  • Radio.Card
  • Radio