Radio

Bundle size WAI-ARIA

A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.

Uncontrolled

Remember me

Save my login details for next time.

Remember me

Save my login details for next time.

Remember me

Save my login details for next time.

"use client";

import * as Radio from "@lora-ui/radio";

export default function Base() {
  function onValueChange(value) {
    console.log(value);
  }
  return (
    <Radio.Group
      defaultValue="uncontrolled-radio-1"
      onValueChange={onValueChange}
      className="m-8 flex flex-col items-center justify-center gap-4"
    >
      <div className="flex space-x-2">
        <Radio.Item
          name="uncontrolled-radio"
          id="uncontrolled-radio-1"
          value="uncontrolled-radio-1"
          className="group box-border flex h-5 w-5 items-center justify-center rounded-full border border-[#d0d5dd] outline-offset-2 has-[:disabled]:pointer-events-none has-[:disabled]:border-[#D0D5DD] has-[:checked]:bg-[#7f56d9] has-[:checked]:has-[:disabled]:bg-[#F9FAFB] dark:border-[#333741] dark:has-[:disabled]:border-[#333741] dark:has-[:checked]:has-[:disabled=false]:bg-[#9e77ed] dark:has-[:disabled]:bg-[#1f242f]"
        >
          <Radio.Indicator className="h-full w-full">
            <svg
              viewBox="0 0 16 16"
              fill="white"
              xmlns="http://www.w3.org/2000/svg"
              className="hidden group-has-[:checked]:block group-has-[:checked]:group-has-[:disabled]:text-[#98a2b3] group-has-[:checked]:text-white"
            >
              <circle cx="8" cy="8" r="3" />
            </svg>
          </Radio.Indicator>
        </Radio.Item>
        <label htmlFor="uncontrolled-radio-1">
          <p className="ml-2 text-sm font-medium text-[#344054] dark:text-[#cecfd2]">
            Remember me
          </p>
          <p className="ml-2 text-sm font-normal text-[#475467] dark:text-[#94969c]">
            Save my login details for next time.
          </p>
        </label>
      </div>
      <div className="flex space-x-2">
        <Radio.Item
          disabled
          name="uncontrolled-radio"
          id="uncontrolled-radio-2"
          value="uncontrolled-radio-2"
          className="group box-border flex h-5 w-5 items-center justify-center rounded-full border border-[#d0d5dd] outline-offset-2 has-[:disabled]:pointer-events-none has-[:disabled]:border-[#D0D5DD] has-[:checked]:bg-[#7f56d9] has-[:checked]:has-[:disabled]:bg-[#F9FAFB] has-[:disabled]:bg-[#f2f4f7] dark:border-[#333741] dark:has-[:disabled]:border-[#333741] dark:has-[:checked]:has-[:disabled=false]:bg-[#9e77ed] dark:has-[:disabled]:bg-[#1f242f]"
        >
          <Radio.Indicator className="h-full w-full">
            <svg
              viewBox="0 0 16 16"
              fill="white"
              xmlns="http://www.w3.org/2000/svg"
              className="hidden group-has-[:checked]:block group-has-[:checked]:group-has-[:disabled]:text-[#98a2b3] group-has-[:checked]:text-white"
            >
              <circle cx="8" cy="8" r="3" />
            </svg>
          </Radio.Indicator>
        </Radio.Item>
        <label htmlFor="uncontrolled-radio-2">
          <p className="ml-2 text-sm font-medium text-[#344054] dark:text-[#cecfd2]">
            Remember me
          </p>
          <p className="ml-2 text-sm font-normal text-[#475467] dark:text-[#94969c]">
            Save my login details for next time.
          </p>
        </label>
      </div>
      <div className="flex space-x-2">
        <Radio.Item
          name="uncontrolled-radio"
          id="uncontrolled-radio-3"
          value="uncontrolled-radio-3"
          className="group box-border flex h-5 w-5 items-center justify-center rounded-full border border-[#d0d5dd] outline-offset-2 has-[:disabled]:pointer-events-none has-[:disabled]:border-[#D0D5DD] has-[:checked]:bg-[#7f56d9] has-[:checked]:has-[:disabled]:bg-[#F9FAFB] dark:border-[#333741] dark:has-[:disabled]:border-[#333741] dark:has-[:checked]:has-[:disabled=false]:bg-[#9e77ed] dark:has-[:disabled]:bg-[#1f242f]"
        >
          <Radio.Indicator className="h-full w-full">
            <svg
              viewBox="0 0 16 16"
              fill="white"
              xmlns="http://www.w3.org/2000/svg"
              className="hidden group-has-[:checked]:block group-has-[:checked]:group-has-[:disabled]:text-[#98a2b3] group-has-[:checked]:text-white"
            >
              <circle cx="8" cy="8" r="3" />
            </svg>
          </Radio.Indicator>
        </Radio.Item>
        <label htmlFor="uncontrolled-radio-3">
          <p className="ml-2 text-sm font-medium text-[#344054] dark:text-[#cecfd2]">
            Remember me
          </p>
          <p className="ml-2 text-sm font-normal text-[#475467] dark:text-[#94969c]">
            Save my login details for next time.
          </p>
        </label>
      </div>
    </Radio.Group>
  );
}

Controlled

Remember me

Save my login details for next time.

Remember me

Save my login details for next time.

Remember me

Save my login details for next time.

"use client";

import React from "react";
import * as Radio from "@lora-ui/radio";

export default function Controlled() {
  const [value, setValue] = React.useState("controlled-radio-2");

  function onValueChange(value) {
    console.log(value);
    setValue(value);
  }
  return (
    <Radio.Group
      value={value}
      onValueChange={onValueChange}
      className="m-8 flex flex-col items-center justify-center gap-4"
    >
      <div className="flex space-x-2">
        <Radio.Item
          name="controlled-radio"
          id="controlled-radio-1"
          value="controlled-radio-1"
          className="group box-border flex h-5 w-5 items-center justify-center rounded-full border border-[#d0d5dd] outline-offset-2 has-[:disabled]:pointer-events-none has-[:disabled]:border-[#D0D5DD] has-[:checked]:bg-[#7f56d9] has-[:checked]:has-[:disabled]:bg-[#F9FAFB] dark:border-[#333741] dark:has-[:disabled]:border-[#333741] dark:has-[:checked]:has-[:disabled=false]:bg-[#9e77ed] dark:has-[:disabled]:bg-[#1f242f]"
        >
          <Radio.Indicator className="h-full w-full">
            <svg
              viewBox="0 0 16 16"
              fill="white"
              xmlns="http://www.w3.org/2000/svg"
              className="hidden group-has-[:checked]:block group-has-[:checked]:group-has-[:disabled]:text-[#98a2b3] group-has-[:checked]:text-white"
            >
              <circle cx="8" cy="8" r="3" />
            </svg>
          </Radio.Indicator>
        </Radio.Item>
        <label htmlFor="controlled-radio-1">
          <p className="ml-2 text-sm font-medium text-[#344054] dark:text-[#cecfd2]">
            Remember me
          </p>
          <p className="ml-2 text-sm font-normal text-[#475467] dark:text-[#94969c]">
            Save my login details for next time.
          </p>
        </label>
      </div>
      <div className="flex space-x-2">
        <Radio.Item
          name="controlled-radio"
          id="controlled-radio-2"
          value="controlled-radio-2"
          className="group box-border flex h-5 w-5 items-center justify-center rounded-full border border-[#d0d5dd] outline-offset-2 has-[:disabled]:border-[#D0D5DD] has-[:checked]:bg-[#7f56d9] has-[:checked]:has-[:disabled]:bg-[#F9FAFB] dark:border-[#333741] dark:has-[:disabled]:border-[#333741] dark:has-[:checked]:has-[:disabled=false]:bg-[#9e77ed] dark:has-[:disabled]:bg-[#1f242f]"
        >
          <Radio.Indicator className="h-full w-full">
            <svg
              viewBox="0 0 16 16"
              fill="white"
              xmlns="http://www.w3.org/2000/svg"
              className="hidden group-has-[:checked]:block group-has-[:checked]:group-has-[:disabled]:text-[#98a2b3] group-has-[:checked]:text-white"
            >
              <circle cx="8" cy="8" r="3" />
            </svg>
          </Radio.Indicator>
        </Radio.Item>
        <label htmlFor="controlled-radio-2">
          <p className="ml-2 text-sm font-medium text-[#344054] dark:text-[#cecfd2]">
            Remember me
          </p>
          <p className="ml-2 text-sm font-normal text-[#475467] dark:text-[#94969c]">
            Save my login details for next time.
          </p>
        </label>
      </div>
      <div className="flex space-x-2">
        <Radio.Item
          name="controlled-radio"
          id="controlled-radio-3"
          value="controlled-radio-3"
          className="group box-border flex h-5 w-5 items-center justify-center rounded-full border border-[#d0d5dd] outline-offset-2 has-[:disabled]:pointer-events-none has-[:disabled]:border-[#D0D5DD] has-[:checked]:bg-[#7f56d9] has-[:checked]:has-[:disabled]:bg-[#F9FAFB] dark:border-[#333741] dark:has-[:disabled]:border-[#333741] dark:has-[:checked]:has-[:disabled=false]:bg-[#9e77ed] dark:has-[:disabled]:bg-[#1f242f]"
        >
          <Radio.Indicator className="h-full w-full">
            <svg
              viewBox="0 0 16 16"
              fill="white"
              xmlns="http://www.w3.org/2000/svg"
              className="hidden group-has-[:checked]:block group-has-[:checked]:group-has-[:disabled]:text-[#98a2b3] group-has-[:checked]:text-white"
            >
              <circle cx="8" cy="8" r="3" />
            </svg>
          </Radio.Indicator>
        </Radio.Item>
        <label htmlFor="controlled-radio-3">
          <p className="ml-2 text-sm font-medium text-[#344054] dark:text-[#cecfd2]">
            Remember me
          </p>
          <p className="ml-2 text-sm font-normal text-[#475467] dark:text-[#94969c]">
            Save my login details for next time.
          </p>
        </label>
      </div>
    </Radio.Group>
  );
}

Installation

Install the component from your command line.

npm install @lora-ui/radio

API Reference

Group

Prop	Type	Default	Explanation
defaultValue	String		Initial checked value
onCheckedChange	Function	(value: string) => void

Item

Prop	Type	Default	Explanation
as	React.ElementType	'div'	'div' \| 'button'
isDisabled	Boolean	false
value	String

Data attribute	Default
[data-actived]	false

Root

Prop	Type	Default	Explanation
name	String		The name of input element
id	String		The id of input element

Indicator

Data attribute	Default
[data-checked]	false
[data-disabled]	false

Keyboard

Command	Description
ArrowDown or ArrowRight	Move focus to the next radio in the group, uncheck the previously focused radio, and check the newly focused radio. If focus is on the last radio, focus moves to the first radio.
ArrowUp or ArrowLeft	Move focus to the previous radio in the group, uncheck the previously focused radio, and check the newly focused radio. If focus is on the first radio, focus moves to the last radio.
Tab	Move focus to the next focusable element, and move focus out of radio group
Shift+Tab	Move focus to the previous focusable element, and move focus out of radio group

Other

All relevant ARIA attributes are automatically managed.