@illa-design/radio v1.3.0

Radio

Radios are used when only one choice may be selected in a series of options.

Installation

yarn add @illa-design/radio

Import component

import { Radio } from "@illa-design/radio"

API

Radio Basic Properties

Radio Events

RadioGroup Basic Props

RadioGroup Events

Example

Basic usage

<Radio>Radio</Radio>
<Radio checked disabled>Disabled Radio</Radio>

RadioGroup usage

<RadioGroup defaultValue='a' style={{ marginBottom: 20 }}>
  <Radio value='a'>A</Radio>
  <Radio value='b'>B</Radio>
  <Radio value='c'>C</Radio>
  <Radio disabled value='d'>D</Radio>
</RadioGroup>
<br />
<RadioGroup options={['A', 'B', 'C', 'D']} style={{ marginBottom: 20 }} />
<br />
<RadioGroup
  options={[
    { label: 'A', value: 'a' },
    { label: 'B', value: 'b' },
    { label: 'C', value: 'c' },
    { label: 'D', value: 'd', disabled: true },
  ]} />

Set RadioGroup arrangement direction

<RadioGroup direction="vertical" defaultValue="a">
  <Radio value="a">A</Radio>
  <Radio value="b">B</Radio>
  <Radio value="c">C</Radio>
  <Radio disabled value="d">
    D
  </Radio>
</RadioGroup>