DocumentationComponents

Radio

Radio

Used to select one option from several options.

View source Report an issue

Start using via importing:

import { Radio, RadioGroup } from "@perceptui/ui";
<RadioGroup defaultValue="1">
  <Radio value="1">Option 1</Radio>
  <Radio value="2">Option 2</Radio>
  <Radio value="3">Option 3</Radio>
</RadioGroup>

API References

PropTypeDescriptionDefault
size"xs"|"sm"|"md"|"lg"|"xl"Size of the Radiosm
colorstringColor of the Radioblue
classNamestringclassName_

Examples

Color

<RadioGroup defaultValue="1">
  <Radio color="blue" value="1">Option 1</Radio>
  <Radio color="red" value="2">Option 2</Radio>
  <Radio color="green" value="3">Option 3</Radio>
  <Radio color="yellow" value="4">Option 4</Radio>
  <Radio color="rose" value="5">Option 5</Radio>
</RadioGroup>
<RadioGroup defaultValue="2">
  <Radio color="light" value="1">Option 1</Radio>
  <Radio color="black" value="2">Option 2</Radio>
  <Radio color="dark" value="3">Option 3</Radio>
  <Radio color="gray" value="4">Option 4</Radio>
  <Radio color="purple" value="5">Option 5</Radio>
</RadioGroup>
<RadioGroup defaultValue="3">
  <Radio color="lime" value="1">Option 1</Radio>
  <Radio color="teal" value="2">Option 2</Radio>
  <Radio color="emerald" value="3">Option 3</Radio>
  <Radio color="indigo" value="4">Option 4</Radio>
  <Radio color="pink" value="5">Option 5</Radio>
</RadioGroup>

Label

Slider