Radio

Radio is used to select a single option from a list of options.

Source
Theme Source
  • Radio - A Radio component.
  • RadioGroup - Group wrapper for composing multiple Radioes.
import { Radio, RadioGroup } from "@dreamy-ui/react";
Default
<Radio defaultChecked>
	Default
</Radio>

RadioGroup allows easily composing multiple Radioes.

Use defaultValue, value and onChange in <RadioGroup /> to control the selected Radioes.

First
Second
<RadioGroup defaultValue={1}>
	<Radio value={1}>First</Radio>
	<Radio value={2}>Second</Radio>
</RadioGroup>

Change the color scheme of the Radio.

Primary
Secondary
Success
Warning
Error
Info
None
<RadioGroup defaultValue="primary">
	<Radio value="primary" scheme="primary">Primary</Radio>
	<Radio value="secondary" scheme="secondary">Secondary</Radio>
	<Radio value="success" scheme="success">Success</Radio>
	<Radio value="warning" scheme="warning">Warning</Radio>
	<Radio value="error" scheme="error">Error</Radio>
	<Radio value="info" scheme="info">Info</Radio>
	<Radio value="none" scheme="none">None</Radio>
</RadioGroup>

Change the Radio size.

Small
Medium
Large
<RadioGroup defaultValue="md">
	<Radio value="sm" size="sm">Small</Radio>
	<Radio value="md" size="md">Medium</Radio>
	<Radio value="lg" size="lg">Large</Radio>
</RadioGroup>