Radio
Radios are used when only one choice may be selected in a series of options.
Import
import { Radio } from "pier-ui";
Usage
import { useState } from "react";
export const ExampleRadio = () => {
const [value, setValue] = useState("1");
<Radio.Group onChange={setValue} value={value}>
<Radio value="1" label="first">
<Radio value="2" label="second">
<Radio value="3" label="third">
Horizontal alignment
import { useState } from "react";
export const ExampleRadio = () => {
const [value, setValue] = useState("1");
<Radio.Group onChange={setValue} value={value} orientation="horizontal">
<Radio value="1" label="first">
<Radio value="2" label="second">
<Radio value="3" label="third">
Colors
import { useState } from "react";
export const ExampleRadio = () => {
const [value, setValue] = useState("1");
<Radio.Group onChange={setValue} value={value} orientation="horizontal">
<Radio value="1" label="first" color="#F87656">
<Radio value="2" label="second" color="#F87656">
<Radio value="3" label="third" color="#F87656">
Props
Radio
| Prop | Description | Type | Default |
|---|
label | label for the checkbox | string | |
className | className for the component | string | |
color | Color of the checkbox | string | theme.colors.grey |
disabled | | boolean | false |
required | | boolean | false |
defaultChecked | If true, the radio will be initially checked. | boolean | false |
Radio.Group
| Prop | Description | Type | Default |
|---|
label | label for the checkbox | string | |
className | className for the component | string | |
orientation | orientation of the component: horizontal or vertical | string | vertical |
defaultValue | Use this to provide a default value for an uncontrolled field. | string | |
value | value for the field ( controlled ) | string | |