Radio

Radio buttons are used when only one choice may be selected in a series of options.

Import

import { Radio, RadioGroup } from '@sajari-ui/core';

import { Radio, RadioGroup } from '@sajari-ui/core';

Usage

Basic usage of radio button.

Editable Example

Option 1

Option 2

Option 3

function RadioExample() {
  const [value, setValue] = React.useState('1');
  return (
    <RadioGroup onChange={(e) => setValue(e.target.value)} value={value} name="example-1">
      <Radio value="1">Option 1</Radio>
      <Radio value="2">Option 2</Radio>
      <Radio value="3">Option 3</Radio>
    </RadioGroup>
  );
}

function RadioExample() {
  const [value, setValue] = React.useState('1');
  return (
    <RadioGroup onChange={(e) => setValue(e.target.value)} value={value} name="example-1">
      <Radio value="1">Option 1</Radio>
      <Radio value="2">Option 2</Radio>
      <Radio value="3">Option 3</Radio>
    </RadioGroup>
  );
}

Disabled

Editable Example

Option 1

Option 2

Option 3

<RadioGroup defaultValue="1" name="example-2">
  <Radio value="1" disabled>
    Option 1
  </Radio>
  <Radio value="2" disabled>
    Option 2
  </Radio>
  <Radio value="3" disabled>
    Option 3
  </Radio>
</RadioGroup>

<RadioGroup defaultValue="1" name="example-2">
  <Radio value="1" disabled>
    Option 1
  </Radio>
  <Radio value="2" disabled>
    Option 2
  </Radio>
  <Radio value="3" disabled>
    Option 3
  </Radio>
</RadioGroup>

Horizontal alignment

Editable Example

Option 1

Option 2

Option 3

<RadioGroup inline spacing="space-x-4" defaultValue="1">
  <Radio value="1">Option 1</Radio>
  <Radio value="2">Option 2</Radio>
  <Radio value="3">Option 3</Radio>
</RadioGroup>

<RadioGroup inline spacing="space-x-4" defaultValue="1">
  <Radio value="1">Option 1</Radio>
  <Radio value="2">Option 2</Radio>
  <Radio value="3">Option 3</Radio>
</RadioGroup>

Invalid

Editable Example

Radio

<Radio invalid>Radio</Radio>

<Radio invalid>Radio</Radio>

Custom Radio Buttons

In some cases, you might need to create components that work like radios but don't look like radios. Chakra exports a RadioButtonGroup to help with this scenario. Here's what you need to do:

Create a component that accepts the checked and disabled props. Be sure to forwardRef to the component because it's used for keyboard accessibility.
Add the component as children of RadioButtonGroup and pass a value prop to it.
If you pass disabled to any of it's children, it'll be skipped in the keyboard navigation.

Editable Example

function Example() {
  // Step 1: Create a component that accepts `checked` and `disabled` prop
  const CustomRadio = React.forwardRef((props, ref) => {
    const { checked, disabled, value, ...rest } = props;
    return (
      <Button
        ref={ref}
        appearance={checked ? 'primary' : 'default'}
        aria-checked={checked}
        role="radio"
        disabled={disabled}
        {...rest}
      />
    );
  });

  // Step 2: Add `CustomRadio` as children of `RadioButtonGroup`
  function Render() {
    return (
      <RadioButtonGroup defaultValue="rad2" onChange={(val) => console.log(val)} inline>
        <CustomRadio value="rad1">CustomRadio 1</CustomRadio>
        <CustomRadio value="rad2">CustomRadio 2</CustomRadio>
        <CustomRadio value="rad3">CustomRadio 3</CustomRadio>
        {/* This child will be skipped in keyboard navigation */}
        <CustomRadio disabled value="rad4">
          CustomRadio 4
        </CustomRadio>
      </RadioButtonGroup>
    );
  }

  return <Render />;
}

function Example() {
  // Step 1: Create a component that accepts `checked` and `disabled` prop
  const CustomRadio = React.forwardRef((props, ref) => {
    const { checked, disabled, value, ...rest } = props;
    return (
      <Button
        ref={ref}
        appearance={checked ? 'primary' : 'default'}
        aria-checked={checked}
        role="radio"
        disabled={disabled}
        {...rest}
      />
    );
  });
  // Step 2: Add `CustomRadio` as children of `RadioButtonGroup`
  function Render() {
    return (
      <RadioButtonGroup defaultValue="rad2" onChange={(val) => console.log(val)} inline>
        <CustomRadio value="rad1">CustomRadio 1</CustomRadio>
        <CustomRadio value="rad2">CustomRadio 2</CustomRadio>
        <CustomRadio value="rad3">CustomRadio 3</CustomRadio>
        {/* This child will be skipped in keyboard navigation */}
        <CustomRadio disabled value="rad4">
          CustomRadio 4
        </CustomRadio>
      </RadioButtonGroup>
    );
  }
  return <Render />;
}

Passing a TypeScript generic type to custom radio buttons

If you want the value of a radio button to be a custom type other than string, number or string array, you can use a generic type parameter.

In the following example, the radio buttons allow the user to filter between two charge cycles, which are objects.

// Given a type that represents the value that is checked in a radio button.
interface ChargeCycle {
  count: number; // e.g. 30 or 1
  unit: string; // e.g. day or year
}

// Set the type of the value prop to your value type.
const CustomRadio = React.forwardRef(
  (
    props: {
      children: React.ReactNode;
      checked?: boolean;
      disabled?: boolean;
      value: ChargeCycle;
    },
    ref?: React.Ref<HTMLElement>,
  ) => {
    const { checked, disabled, value, ...rest } = props;

    return (
      <Button
        ref={ref}
        role="radio"
        appearance={checked ? 'primary' : 'default'}
        aria-checked={checked}
        disabled={disabled}
        {...rest}
      />
    );
  },
);

const every30Days = { count: 30, unit: 'day' };
const annually = { count: 1, value: 'year' };

function Example() {
  const [chargeCycle, setChargeCycle] = React.useState(every30Days);

  // Use your value type as the generic type parameter and pass your objects as
  // the value for each radio button.
  return (
    <RadioButtonGroup<ChargeCycle> value={chargeCycle} onChange={(v) => setChargeCycle(v)}>
      <CustomRadio value={every30Days}>Every 30 days</CustomRadio>
      <CustomRadio value={annually}>Annually</CustomRadio>
    </RadioButtonGroup>
  );
}

// Given a type that represents the value that is checked in a radio button.
interface ChargeCycle {
  count: number; // e.g. 30 or 1
  unit: string; // e.g. day or year
}
// Set the type of the value prop to your value type.
const CustomRadio = React.forwardRef(
  (
    props: {
      children: React.ReactNode;
      checked?: boolean;
      disabled?: boolean;
      value: ChargeCycle;
    },
    ref?: React.Ref<HTMLElement>,
  ) => {
    const { checked, disabled, value, ...rest } = props;
    return (
      <Button
        ref={ref}
        role="radio"
        appearance={checked ? 'primary' : 'default'}
        aria-checked={checked}
        disabled={disabled}
        {...rest}
      />
    );
  },
);
const every30Days = { count: 30, unit: 'day' };
const annually = { count: 1, value: 'year' };
function Example() {
  const [chargeCycle, setChargeCycle] = React.useState(every30Days);
  // Use your value type as the generic type parameter and pass your objects as
  // the value for each radio button.
  return (
    <RadioButtonGroup<ChargeCycle> value={chargeCycle} onChange={(v) => setChargeCycle(v)}>
      <CustomRadio value={every30Days}>Every 30 days</CustomRadio>
      <CustomRadio value={annually}>Annually</CustomRadio>
    </RadioButtonGroup>
  );
}

It is important to use the same reference to the object in the value prop. If you create new objects on the fly then the component cannot determine which radio button is checked.

Props

Radio Props

Name	Type	Description
`name`	`string`	The name of the input field in a radio (Useful for form submission)
`value`	`string` or `number`	The value to be used in the radio input. This is the value that will be returned on form submission
`checked`	`boolean`	If `true`, the radio will be checked. You'll need to pass `onChange` to update it's value (since it's now controlled)
`defaultChecked`	`boolean`	If `true`, the radio will be initially checked
`disabled`	`boolean`	If `true`, the radio will be disabled
`invalid`	`boolean`	If `true`, the radio is marked as invalid. Changes style of unchecked state
`children`	`React.ReactNode`	The children of the radio
`onChange`	`function`	Function called when the state of the radio changes
`onBlur`	`function`	Function called when you blur out of the radio
`onFocus`	`function`	Function called when the radio receive focus
`aria-label`	`string`	An accessible label for the radio in event there's no visible label or `children` was passed
`aria-labelledby`	`string`	Id that points to the label for the radio in event no `children` was passed

RadioGroup & RadioButtonGroup Props

Name	Type	Description
`id`	`string`	The id of the checkbox group.
`name`	`string`	The name of the input field in a radio (Useful for form submission)
`defaultValue`	`string`	The initial value of the radio group
`value`	`RadioProps['value']`	The value of the radio group
`onChange`	`function`	The callback fired when any children Radio is checked
`spacing`	`FlexProps['space']`	The space between each checkbox
`inline`	`boolean`	If `true`, the checkboxes will aligned horizontally.

RadioButtonGroup composes the ButtonGroup component.