Radio

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

Import

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

Usage

Editable Example

<Radio label='Radio' />

Disabled

Editable Example

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

Color

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>
	<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>
	<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'/>
	</div>
</div>

Error

Editable Example

<Radio error label='error' />

Size

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'/>
</div>

Radio Group

Editable Example

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