Radios are used when only one choice may be selected in a series of options.


import { Radio } from "@recastui/react";


Editable Example
<Radio label='Radio' />


Editable Example
<div className='flex space-x-5 direction-row'>
<Radio disabled label='Radio'/>
<Radio disabled defaultChecked label='Radio'/>


Use the color props to override the color scheme of the Radio to any color key specified in the Theme. Default color is main.

Editable Example
<div className="space-y-2">Stateful colors:</div>
<div className="grid gap-2 grid-cols-3 lg:grid-cols-5 mb-2">
<Radio color='error' label='error'/>
<Radio color='info' label='info'/>
<Radio color='success' label='success'/>
<Radio color='warning' label='warning'/>
<div className="space-y-2">All other colors:</div>
<div className="grid gap-2 grid-cols-3 lg:grid-cols-5">
<Radio color='tomato' label='tomato'/>
<Radio color='red' label='red'/>
<Radio color='crimson' label='crimson'/>
<Radio color='pink' label='pink'/>
<Radio color='plum' label='plum'/>
<Radio color='purple' label='purple'/>
<Radio color='violet' label='violet'/>
<Radio color='indigo' label='indigo'/>
<Radio color='blue' label='blue'/>
<Radio color='cyan' label='cyan'/>
<Radio color='teal' label='teal'/>
<Radio color='green' label='green'/>
<Radio color='grass' label='grass'/>
<Radio color='orange' label='orange'/>
<Radio color='brown' label='brown'/>
<Radio color='sky' label='sky'/>
<Radio color='mint' label='mint'/>
<Radio color='yellow' label='yellow'/>
<Radio color='amber' label='amber'/>
<Radio color='gold' label='gold'/>
<Radio color='bronze' label='bronze'/>


Editable Example
<Radio error label='error' />


The Radio component comes with 3 sizes.

Editable Example
<div className='space-y-2'>
<Radio labelProps={{fullWidth: true}} name='size' size='sm' label='Tea'/>
<Radio labelProps={{fullWidth: true}} name='size' size='base' label='Tea'/>
<Radio labelProps={{fullWidth: true}} name='size' size='lg' label='Tea'/>

Radio Group

Editable Example
<div role='radiogroup' className='space-y-2'>
<legend className='font-semibold'>What would you link to drink?</legend>
<Radio labelProps={{fullWidth: true}} name='beverage' value='tea' label='Tea'/>
<Radio labelProps={{fullWidth: true}} name='beverage' value='coffee' label='Coffee'/>