InputsRadio

Radio

A single radio within a group. The group is composed via fieldset; this is the individual control.

Native <input>Group via fieldsetDisabled state

States

Unselected, selected, disabled. The radio dot is the system foreground at full opacity.

States

MethodEmailSMSPush (disabled)

Anatomy

16 × 16 px circle, 1 px --border at rest, 2 px radius fully rounded
Selected: 8 × 8 px --foreground dot, centered
Focus ring is the system default
Fieldset + legend used for the group; legend is set in ds-label style

Implementation

radio.tsx

import { forwardRef, type InputHTMLAttributes } from "react"
import { cn } from "@/lib/utils"

interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
  label: string
  value: string
}

export const Radio = forwardRef<HTMLInputElement, RadioProps>(
  function Radio({ label, className, ...props }, ref) {
    return (
      <label className={cn("ds-radio", className)}>
        <input ref={ref} type="radio" {...props} />
        <span className="ds-radio__dot" aria-hidden="true" />
        <span className="ds-radio__label">{label}</span>
      </label>
    )
  },
)

Props

Prop	Type	Default	Description
`label`	`string`	`None`	Required: the label
`name`	`string`	`None`	Required: the group
`value`	`string`	`None`	Required: the value
`checked`	`boolean`	`false`	Selected state
`disabled`	`boolean`	`false`	Disabled state