Select#

Ripple UI comes with a select component that can be used to select a single option from a list of options.

Default#

Simple example of select.

HTML

JSX

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

Colors#

Select colors.

HTML

JSX

<select class="select">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<select class="select select-primary">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<select class="select select-secondary">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<select class="select select-success">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<select class="select select-error">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<select class="select select-warning">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

Ghost#

Select ghost.

HTML

JSX

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

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

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

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

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

Sizes#

Select sizes.

HTML

JSX

<select class="select select-xs">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<select class="select select-sm">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<select class="select select-md">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<select class="select select-lg">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<select class="select select-xl">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

Rounded#

Select rounded.

HTML

JSX

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

Block#

Select block.

HTML

JSX

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

Disabled#

Disabled select.

HTML

JSX

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

API#

`Select Classes`

class	Description
select	Select base class
select-primary	Set primary color
select-secondary	Set secondary color
select-success	Set success color
select-error	Set error color
select-warning	Set warning color
select-ghost-primary	Border hover primary
select-ghost-secondary	Border hover secondary
select-ghost-success	Border hover success
select-ghost-error	Border hover error
select-ghost-warning	Border hover warning
select-xs	Set extra small size
select-sm	Set small size
select-md	Set medium size
select-lg	Set large size
select-xl	Set extra large size
select-rounded	Set full rounded
select-block	Make select takes full width

Range Skeleton

Edit this page on GitHub