RadioGroup

Default radio group

Write a storyRead a storyListen a story

Show code

default.tsx

import { RadioGroup } from "@hrc/input";

export const RadioGroupDefault = () => {
  return (
    <RadioGroup
      name="radio-group-default"
      options={[
        { label: "Write a story", value: "write" },
        { label: "Read a story", value: "read" },
        { label: "Listen a story", value: "listen" },
      ]}
      defaultValue="read"
    />
  );
};

Colors

Use the color prop to change the color of the group.

PrimaryOther option

SecondaryOther option

ErrorOther option

InfoOther option

WarningOther option

SuccessOther option

Show code

colors.tsx

import { RadioGroup } from "@hrc/input";

const colors = [
  "primary",
  "secondary",
  "error",
  "info",
  "warning",
  "success",
] as const;

const toTitleCase = (str: string) => `${str[0].toUpperCase()}${str.slice(1)}`;

export function RadioGroupColors() {
  return colors.map((color) => (
    <RadioGroup
      key={`radio-group-${color}`}
      name={`radio-group-${color}`}
      color={color}
      options={[
        { label: `${toTitleCase(color)}`, value: color },
        { label: "Other option", value: "other-option" },
      ]}
      defaultValue={color}
    />
  ));
}

Disabled

Add the disabled prop to disable the group.

toggle_offDisabled

Option 1Option 2

Show code

disabled.tsx

import { useState } from "react";
import { RadioGroup } from "@hrc/input";
import { ToggleDisabled } from "./ToggleDisabled";

export function RadioGroupDisabled() {
  const [disabled, setDisabled] = useState(false);

  return (
    <>
      <ToggleDisabled disabled={disabled} setter={setDisabled} />

      <RadioGroup
        name="radio-group-disabled"
        options={[
          { label: "Option 1", value: "option-1" },
          { label: "Option 2", value: "option-2" },
        ]}
        defaultValue="option-1"
        disabled={disabled}
      />
    </>
  );
}

ToggleDisabled.tsx

import { Button } from "@hrc/button";
import { Icon } from "@hrc/material-icons";

type Props = {
  disabled: boolean;
  setter: (disabled: boolean) => void;
};

export function ToggleDisabled({ disabled, setter }: Props) {
  return (
    <Button
      color={disabled ? "info" : undefined}
      onClick={() => setter(!disabled)}
      className="toggle-disabled"
    >
      <Icon name={disabled ? "toggle_on" : "toggle_off"} />
      Disabled
    </Button>
  );
}

Row

Use the row prop to display the group in a row.

Option 1Option 2Option 3

Show code

row.tsx

import { RadioGroup } from "@hrc/input";

export function RadioGroupRow() {
  return (
    <RadioGroup
      name="radio-group-row"
      options={[
        { label: "Option 1", value: "option-1" },
        { label: "Option 2", value: "option-2" },
        { label: "Option 3", value: "option-3" },
      ]}
      defaultValue="option-1"
      row
    />
  );
}

Controlled

Use the value and onChange props to control the group.

Shut downRebootRestart

Show code

controlled.tsx

import { useState } from "react";
import { RadioGroup } from "@hrc/input";

export const RadioGroupControlled = () => {
  const [value, setValue] = useState("shut-down");

  return (
    <RadioGroup
      name="radio-group-controlled"
      options={[
        { label: "Shut down", value: "shut-down" },
        { label: "Reboot", value: "reboot" },
        { label: "Restart", value: "restart" },
      ]}
      value={value}
      onChange={setValue}
    />
  );
};

Type-safe

The RadioGroup component is type-safe by default.

Additionally, you can use the RadioGroupOption type utility to type-safe your controlled group.

Controlled

Shut downRebootRestart

Uncontrolled

Shut downRebootRestart

Show code

type-safe.tsx

import { useState } from "react";
import { RadioGroup, type RadioGroupOption } from "@hrc/input";

const options = [
  { label: "Shut down", value: "shut-down" },
  { label: "Reboot", value: "reboot" },
  { label: "Restart", value: "restart" },
] as const; // enable strict type checking with `as const`
// extract option values by using `RadioGroupOption`
type ActionOption = RadioGroupOption<typeof options>;

export const RadioGroupTypeSafe = () => {
  // you'll have intellisense for `action`, `setAction` and `useState`
  const [action, setAction] = useState<ActionOption>();

  return (
    <>
      <p><strong>Controlled</strong></p>
      <RadioGroup
        name="radio-group-type-safe-controlled"
        options={options}
        value={action}
        // also you'll have type checking for `onChange`
        onChange={setAction}
      />
      <p><strong>Uncontrolled</strong></p>
      <RadioGroup
        name="radio-group-type-safe-uncontrolled"
        options={options}
        // even you'll have intellisense for `defaultValue`
        defaultValue="reboot"
      />
    </>
  );
};

<Radio /> children

Use the Radio component to have granular control over the group.

Controlled

Shut downRebootRestart

Uncontrolled

Shut downRebootRestart

Show code

radio-children.tsx

import { useState } from "react";
import { RadioGroup, Radio, type RadioGroupOption } from "@hrc/input";

const NAMES = {
  CONTROLLED: "radio-group-children-controlled",
  UNCONTROLLED: "radio-group-children-uncontrolled",
};
// with a HashMap, you ensure using
// the correct value for `<Radio />` childrens
const ACTIONS = {
  SHUT_DOWN: "shut-down",
  REBOOT: "reboot",
  RESTART: "restart",
} as const; // enable strict type checking with `as const`
// you can also use `RadioGroupOption` with a HashMap
type ActionOption = RadioGroupOption<typeof ACTIONS>;

export const RadioGroupRadioChildren = () => {
  const [action, setAction] = useState<ActionOption>();

  return (
    <>
      <p><strong>Controlled</strong></p>
      <RadioGroup name={NAMES.CONTROLLED} value={action} onChange={setAction}>
        <Radio label="Shut down" value={ACTIONS.SHUT_DOWN} />
        <Radio label="Reboot" value={ACTIONS.REBOOT} />
        <Radio label="Restart" value={ACTIONS.RESTART} />
      </RadioGroup>
      <p><strong>Uncontrolled</strong></p>
      <RadioGroup name={NAMES.UNCONTROLLED} defaultValue={ACTIONS.REBOOT}>
        <Radio label="Shut down" value={ACTIONS.SHUT_DOWN} />
        <Radio label="Reboot" value={ACTIONS.REBOOT} />
        <Radio label="Restart" value={ACTIONS.RESTART} />
      </RadioGroup>
    </>
  );
};

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for <RadioGroup />:

• <RadioGroup />