Live Docs

Navigation

Forms /

stable

Radio

Pilihan eksklusif satu dari banyak opsi. Tersedia Radio dan RadioGroup untuk layout grouped.

import { Radio, RadioGroup } from "@naraya/ui";

Overview

Gunakan Radio saat user harus memilih tepat satu opsi. Semua radio dalam satu grup wajib punya nilai name yang sama.

Examples

Default

<Radio label="Starter plan" name="plan" value="starter" />

RadioGroup vertical

<RadioGroup>
  <Radio name="plan" value="starter" label="Starter" />
  <Radio name="plan" value="pro" label="Pro" />
  <Radio name="plan" value="enterprise" label="Enterprise" />
</RadioGroup>

RadioGroup inline

<RadioGroup inline>
  <Radio name="billing" value="monthly" label="Monthly" />
  <Radio name="billing" value="yearly" label="Yearly" />
</RadioGroup>

Controlled

Selected: starter

const [plan, setPlan] = useState("starter");

<Radio checked={plan === "starter"} onChange={() => setPlan("starter")} />
<Radio checked={plan === "pro"} onChange={() => setPlan("pro")} />
<Radio checked={plan === "enterprise"} onChange={() => setPlan("enterprise")} />

Disabled

<Radio disabled label="Option A" />
<Radio disabled defaultChecked label="Option B" />

Props

PropTypeDefaultDescription
labelReactNode—Label teks radio.
disabledbooleanfalseNonaktifkan interaksi.
checkedboolean—Controlled checked state.
defaultCheckedboolean—Uncontrolled initial checked.
...restInputHTMLAttributes (kecuali type)—Atribut native radio (name, value, onChange, required, dsb).
RadioGroup.inlinebooleanfalseLayout horizontal untuk isi group.

Tokens Used

--color-primary

Dot active dan focus ring

--border-subtle

Border circle default

--text-main

Warna label

Accessibility

  • Semua radio dalam grup harus punya name yang sama agar navigasi arrow key benar.
  • Radio pakai native input type='radio' jadi semantics sudah tepat untuk screen reader.
  • Bila punya judul grup, gunakan fieldset + legend pada parent container form.
  • Hindari opsi tanpa label yang jelas.