Skip to content
Yuzur1ha Open

Component referenceDraft

Radio

Radio presents a small set of mutually exclusive choices with a shared accessible group label.

Updated

Design notes

Arrow-key behavior and selection are handled by native radio inputs. A visible state change does not require press scaling.

Design sourceOpen in Figma

Radio design

Inspect the original component, variants and visual details.

Playground

Playgrounddemo.tsx
Profile visibility
private

content/components/radio/demo.tsx

import { useState } from "react"
import { Radio } from "@yuzur1ha/ui"
import { DemoResult } from "../../examples/result"

export function RadioDemo() {
  const [value, setValue] = useState("private")
  return (
    <>
      <fieldset>
        <legend className="demo-label">Profile visibility</legend>
        {[
          { value: "private", label: "Private" },
          { value: "public", label: "Public" },
        ].map((option) => (
          <Radio
            key={option.value}
            label={option.label}
            name="visibility"
            value={option.value}
            checked={value === option.value}
            onChange={() => setValue(option.value)}
          />
        ))}
        <Radio label="Disabled" name="visibility" disabled />
      </fieldset>
      <DemoResult>{value}</DemoResult>
    </>
  )
}

API

Radio

A labelled native radio input. Give related options the same name. className styles the label, ref points to the input.

RadioProps
PropertyTypeRequiredDefaultDescription
labelstringYes—Visible label and accessible name.
checkedbooleanNo—Controlled checked state. Pair with onChange.
defaultCheckedbooleanNo—Initial checked state for an uncontrolled checkbox or radio.
onChangeChangeEventHandler<HTMLInputElement, HTMLInputElement>No—Native input change handler. Read value or checked from event.currentTarget.
disabledbooleanNo—Disables the native control.
requiredbooleanNo—Requires a non-empty native control value during form validation.
namestringNo—Native form submission field name.
valuestring | number | readonly string[]No—Current native control value. Pair with onChange for controlled input.
idstringNo—Native control ID. Generated when omitted; the visible label and supporting text use this association.
classNamestringNo""Additional classes applied to the component’s documented root or control.
refRef<HTMLInputElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.