1.3.0 • Published 2 years ago

@illa-design/radio v1.3.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
2 years ago

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

PropsDescTypeDefault
colorSchemeSet background color"white" | "blackAlpha" | "gray" | "grayBlue" | "red" | "orange" | "yellow" | "green" | "blue" | "cyan" | "purple" | string"blue"
valueThe value of radioT-
variantThe variant of radio"button" | "radio""radio"
disabledWhether the radio is disabledboolean-
checkedWhether the radio is checked (Controlled)boolean-
defaultCheckedWhether the radio is initially selectedboolean-

Radio Events

PropsDescTypeDefault
onChangeCallback when value changes(checked: boolean, event: ChangeEvent) => void-

RadioGroup Basic Props

PropsDescTypeDefault
nameThe name of the input field in a radiostring-
valueThe value to be used in the radio buttonT-
variantThe variant of radio"button" | "radio""radio"
colorSchemeSet background color"white" | "blackAlpha" | "gray" | "grayBlue" | "red" | "orange" | "yellow" | "green" | "blue" | "cyan" | "purple" | string"blue"
disabledWhether the radio is disabledboolean-
defaultValueTo set default valueT-
optionsSet children optionsstring[] | number[] | { label: ReactNode; value: any; disabled: boolean }[]-
directionArrangement direction"vertical" | "horizontal""horizontal"
spacingThe spacing between the checkbox and its label textstring | number"24px"

RadioGroup Events

PropsDescTypeDefault
onChangeCallback when value changes(checked: boolean, event: ChangeEvent) => void-

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>
1.2.0

2 years ago

1.3.0

2 years ago

1.0.29

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.30

2 years ago

1.1.0

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.26

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.20

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.0.10

3 years ago

0.0.11

3 years ago

0.0.12

3 years ago

0.0.13

3 years ago

0.0.14

3 years ago

0.0.15

3 years ago

0.0.9

3 years ago

0.0.16

3 years ago

0.0.17

3 years ago

0.0.8

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago