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>You can control the Radio state by using value and onChange in <RadioGroup />.
React Router
Next.js
Vue.js
export function ControlledRadios() {
const [value, setValue] = useState<string | number>("rr");
return (
<RadioGroup
value={value}
onChange={setValue}
>
<Radio value="rr">React Router</Radio>
<Radio value="next">Next.js</Radio>
<Radio value="vue">Vue.js</Radio>
</RadioGroup>
);
}