components

Input Radio

Radio buttons allow users to select exactly one option from a group of mutually exclusive choices. Use InputRadioGroup as a container with InputRadioOption children for each choice. The group manages selection state, while individual options can be disabled.

Import
import { InputRadio } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

  • +Choose exactly one option from a small set (2-5 items).
  • +When users need to see all options at once to make a comparison.
  • +For mutually exclusive choices like size, priority, or mode.

When not to use

  • −For more than 5 options — use InputSelect.
  • −For non-exclusive selections — use InputCheckbox.
  • −For boolean on/off — use ToggleSwitch or InputCheckbox.

Examples

Code Samples

Default Radio Group

A group of radio buttons using InputRadioGroup and InputRadioOption. Only one option can be selected at a time.

import { useState } from "react";
import { InputRadioGroup, InputRadioOption } from "@skedulo/breeze-ui-react";

export default function DefaultRadioGroup() {
  const [selected, setSelected] = useState("medium");

  return (
    <InputRadioGroup
      name="size-radio"
      label="Size"
      value={selected}
      onChange={() => { /* handled by web component */ }}
    >
      <InputRadioOption value="small">Small</InputRadioOption>
      <InputRadioOption value="medium">Medium</InputRadioOption>
      <InputRadioOption value="large">Large</InputRadioOption>
    </InputRadioGroup>
  );
}

With Disabled Option

A radio group where an individual option is disabled while others remain interactive.

import { useState } from "react";
import { InputRadioGroup, InputRadioOption } from "@skedulo/breeze-ui-react";

export default function RadioWithDisabledOption() {
  const [priority, setPriority] = useState("normal");

  return (
    <InputRadioGroup
      name="priority-radio"
      label="Priority"
      value={priority}
      onChange={() => { /* handled by web component */ }}
    >
      <InputRadioOption value="low">Low</InputRadioOption>
      <InputRadioOption value="normal">Normal</InputRadioOption>
      <InputRadioOption value="high">High</InputRadioOption>
      <InputRadioOption value="critical" disabled>
        Critical (restricted)
      </InputRadioOption>
    </InputRadioGroup>
  );
}

Disabled Group

An entire radio group that is disabled, preventing interaction with all options.

import { InputRadioGroup, InputRadioOption } from "@skedulo/breeze-ui-react";

export default function DisabledRadioGroup() {
  return (
    <InputRadioGroup
      name="payment-radio"
      label="Payment Method"
      value="card"
      disabled
    >
      <InputRadioOption value="card">Credit Card</InputRadioOption>
      <InputRadioOption value="bank">Bank Transfer</InputRadioOption>
      <InputRadioOption value="paypal">PayPal</InputRadioOption>
    </InputRadioGroup>
  );
}

Required

A required radio group that displays a required indicator on the label.

import { InputRadioGroup, InputRadioOption } from "@skedulo/breeze-ui-react";

export default function RequiredRadioGroup() {
  return (
    <InputRadioGroup
      name="plan-radio"
      label="Subscription Plan"
      value=""
      required
    >
      <InputRadioOption value="free">Free</InputRadioOption>
      <InputRadioOption value="pro">Pro</InputRadioOption>
      <InputRadioOption value="enterprise">Enterprise</InputRadioOption>
    </InputRadioGroup>
  );
}

Guidelines

Do

  • ✓Always group radios with a shared name attribute.
  • ✓Pre-select a sensible default when possible.
  • ✓List options in a logical order (e.g. by frequency or severity).
  • ✓Provide clear, concise labels for each option.

Don't

  • ✗Don't use a single radio button alone — there must be at least 2 options.
  • ✗Don't use radio buttons for actions — they're for selection only.
  • ✗Don't mix radio buttons with checkboxes in the same group.

API Reference

PropTypeDefaultDescription
name*string—The group name for the radio buttons, used for form submission and accessibility. Set on InputRadioGroup.
labelstring—A visible label displayed above the radio group. Set on InputRadioGroup.
valuestring—The currently selected option value. Set on InputRadioGroup.
disabledbooleanfalseDisables the entire radio group when set on InputRadioGroup, or a single option when set on InputRadioOption.
requiredbooleanfalseMarks the radio group as required, displaying a required indicator alongside the label. Set on InputRadioGroup.
onChange() => void—Callback fired when the selected option changes. Set on InputRadioGroup.
InputRadioOption value*string—The value for an individual radio option. Set on InputRadioOption.
InputRadioOption childrenReactNode—The label text displayed next to the radio button. Set on InputRadioOption.
InputRadioOption disabledbooleanfalseDisables a single radio option while leaving others in the group interactive.

Related Components

Input CheckboxInput SelectToggle Switch