Radio
A radio component is a UI element that allows users to select one option from a set of mutually exclusive choices.
Expand code
<Radio name={'showcase-1'} value={'foo'} defaultChecked/>
<Radio name={'showcase-1'} value={'bar'}/>
<Radio name={'showcase-1'} value={'baz'} disabled/>Content
The children prop allows you to add extra content to the radio component.
This content is rendered within a label element that is associated with the radio input.
Expand code
<Radio name={'showcase-2'} value={'foo'} defaultChecked>First option</Radio>
<Radio name={'showcase-2'} value={'bar'}>Second option</Radio>
<Radio name={'showcase-2'} value={'baz'} disabled>Disabled option</Radio>Color
You can customize the checkmark color using any value supported by the background-color property in CSS, such as red, #11aa33, or rgb(0,0,0).
Expand code
<Radio name={'foo'} value={'foo'} defaultChecked color={'red'}/>
<Radio name={'abc'} value={'abc'} defaultChecked color={'#11aa33'}/>
<Radio name={'bar'} value={'bar'} defaultChecked color={'rgb(181,46,213)'}/>
<Radio name={'baz'} value={'baz'} defaultChecked color={'rgb(0,0,0)'} disabled/>The color of a disabled radio cannot be overwritten.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | Content of the component |
| color | string | - | Color of the checkmark |
| dark | boolean | false | Use the darkmode style |
In addition to these props the component uses the default html input props (e.g. checked).
Last updated on