Radio

Default

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<input
		checked="{true}"
		class="radio success"
		name="radio-color"
		type="radio"
	/>
	<input class="radio warn" name="radio-color" type="radio" />
	<input class="radio danger" name="radio-color" type="radio" />
	<input class="radio bw" name="radio-color" type="radio" />
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='radio success'
    name='radio-color'
    type='radio' />
  <input className='radio warn'
    name='radio-color'
    type='radio' />
  <input className='radio danger'
    name='radio-color'
    type='radio' />
  <input className='radio bw'
    name='radio-color'
    type='radio' />
</div>

Colored

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<input
		checked="{true}"
		class="radio success colored"
		name="radio-colored"
		type="radio"
	/>
	<input class="radio warn colored" name="radio-colored" type="radio" />
	<input class="radio danger colored" name="radio-colored" type="radio" />
	<input class="radio bw colored" name="radio-colored" type="radio" />
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='radio success colored'
    name='radio-colored'
    type='radio' />
  <input className='radio warn colored'
    name='radio-colored'
    type='radio' />
  <input className='radio danger colored'
    name='radio-colored'
    type='radio' />
  <input className='radio bw colored'
    name='radio-colored'
    type='radio' />
</div>

Size

Use xs sm md lg xl classes to control size of this component.

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<input checked="{true}" class="radio colored warn xs" type="radio" />
	<input checked="{true}" class="radio colored warn sm" type="radio" />
	<input checked="{true}" class="radio colored warn md" type="radio" />
	<input checked="{true}" class="radio colored warn lg" type="radio" />
	<input checked="{true}" class="radio colored warn xl" type="radio" />
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='radio colored warn xs'
    type='radio' />
  <input defaultChecked={true}
    className='radio colored warn sm'
    type='radio' />
  <input defaultChecked={true}
    className='radio colored warn md'
    type='radio' />
  <input defaultChecked={true}
    className='radio colored warn lg'
    type='radio' />
  <input defaultChecked={true}
    className='radio colored warn xl'
    type='radio' />
</div>

Prompt Select