Forms

Radio group

A set of Radio buttons where only one can be selected. Built on native radios, so arrow keys move the selection and forms submit the value.

MonthlyYearlyTwo months free

demos/radio.tsx

import { Radio, RadioGroup } from "pixelbits/radio";

export default function Demo() {
  return (
    <RadioGroup aria-label="Billing" defaultValue="monthly">
      <Radio value="monthly" label="Monthly" />
      <Radio value="yearly" label="Yearly" description="Two months free" />
    </RadioGroup>
  );
}

Installation

npm: import

import { RadioGroup, Radio } from "pixelbits/radio";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/radio.json

API

<RadioGroup>

A set of Radio buttons where only one can be selected. Built on native radios, so arrow keys move the selection and forms submit the value.

Example

<RadioGroup aria-label="Billing" defaultValue="monthly">
  <Radio value="monthly" label="Monthly" />
  <Radio value="yearly" label="Yearly" />
</RadioGroup>

Prop	Type	Default	Description
value	string	—	The selected value (controlled).
defaultValue	string	—	The value selected at first (uncontrolled).
onValueChange	(value: string) => void	—	Called with the value of the radio the user picked.
name	string	—	Form field name shared by the radios. Generated when omitted.
aria-label	string	—	Accessible name of the group, when there is no visible heading linked with `aria-labelledby`.
disabled	boolean	false	Disables every radio in the group.
orientation	"vertical" \| "horizontal"	"vertical"	Layout of the radios.
children*	ReactNode	—	The `Radio` items.

Also accepts every prop of Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">.

<Radio>

One option of a RadioGroup: a native radio, styled, with a square pixel dot when selected.

Example

<Radio value="yearly" label="Yearly" description="Two months free" />

Prop	Type	Default	Description
value*	string	—	The value this radio stands for.
label	ReactNode	—	Text next to the radio; clicking it selects the radio.
description	ReactNode	—	Smaller text under the label.

Also accepts every prop of Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value">.