Radio

Usage

import {
  Radio,
  RadioButton,
  RadioHintText,
  RadioItem,
  RadioLabel,
} from "@govtechmy/myds-react/radio";

<Radio>
  <RadioItem>
    <RadioButton value="apple" id="apple" />
    <RadioLabel htmlFor="apple">Apple</RadioLabel>
  </RadioItem>
  <RadioItem>
    <RadioButton value="banana" id="banana" />
    <div>
      <RadioLabel htmlFor="banana">Banana</RadioLabel>
      <RadioHintText htmlFor="banana">Comes pre-packaged.</RadioHintText>
    </div>
  </RadioItem>
</Radio>

Contoh

Saiz

Gunakan prop size untuk menukar saiz radio.

Dinyahaktifkan

Nyahaktifkan semua item radio dengan menetapkan prop disabled kepada true pada komponen Radio.

Nyahaktifkan item radio individu dengan menetapkan prop disabled kepada true pada komponen RadioItem:

Komponen Terkawal

Untuk menggunakan Radio sebagai komponen terkawal, tetapkan prop value dan onValueChange.

const [value, setValue] = useState("")
 
<Radio value={value} onValueChange={setValue}>
  {/* ... */}
</Radio>

Props

Radio

Radio menggunakan RadioGroup.Root Radix UI. Sila rujuk rujukan API dalam dokumentasi ini.

RadioButton

RadioButton menggunakan RadioGroup.Item Radix UI. Sila rujuk rujukan API dalam dokumentasi ini.

RadioItem

RadioHintText menggunakan prop yang sama seperti elemen div biasa.

RadioHintText

RadioHintText menggunakan prop yang sama seperti elemen label biasa.

RadioLabel

RadioLabel menggunakan prop yang sama seperti elemen label biasa.