Select

Default

Preview

Code

HTML

Code

JSX/TSX

<select class="select success">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

<select className='select success'>
  <option>
    Option 1
  </option>
  <option>
    Option 2
  </option>
  <option>
    Option 3
  </option>
</select>

Solid

Preview

Code

HTML

Code

JSX/TSX

<select class="select solid danger">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

<select className='select solid danger'>
  <option>
    Option 1
  </option>
  <option>
    Option 2
  </option>
  <option>
    Option 3
  </option>
</select>

Ghost

Preview

Code

HTML

Code

JSX/TSX

<select class="select ghost success">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

<select className='select ghost success'>
  <option>
    Option 1
  </option>
  <option>
    Option 2
  </option>
  <option>
    Option 3
  </option>
</select>

Pill

Preview

Code

HTML

Code

JSX/TSX

<select class="select pill success">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

<select className='select pill success'>
  <option>
    Option 1
  </option>
  <option>
    Option 2
  </option>
  <option>
    Option 3
  </option>
</select>

Disabled

Preview

Code

HTML

Code

JSX/TSX

<select class="select success" disabled="{true}">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

<select className='select success'
  disabled={true}>
  <option>
    Option 1
  </option>
  <option>
    Option 2
  </option>
  <option>
    Option 3
  </option>
</select>

Size

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

Preview

Code

HTML

Code

JSX/TSX

<div class="grid gap-4">
	<select class="select success xs">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
	<select class="select success sm">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
	<select class="select success md">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
	<select class="select success lg">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
	<select class="select success xl">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
</div>

<div className='grid gap-4'>
  <select className='select success xs'>
    <option>
      Option 1
    </option>
    <option>
      Option 2
    </option>
    <option>
      Option 3
    </option>
  </select>
  <select className='select success sm'>
    <option>
      Option 1
    </option>
    <option>
      Option 2
    </option>
    <option>
      Option 3
    </option>
  </select>
  <select className='select success md'>
    <option>
      Option 1
    </option>
    <option>
      Option 2
    </option>
    <option>
      Option 3
    </option>
  </select>
  <select className='select success lg'>
    <option>
      Option 1
    </option>
    <option>
      Option 2
    </option>
    <option>
      Option 3
    </option>
  </select>
  <select className='select success xl'>
    <option>
      Option 1
    </option>
    <option>
      Option 2
    </option>
    <option>
      Option 3
    </option>
  </select>
</div>

Radio Steps