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>

​
Solid

Select Solid.

HTML
JSX
<select class="select select-solid">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<select class="select select-solid-primary">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<select class="select select-solid-secondary">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<select class="select select-solid-success">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<select class="select select-solid-error">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<select class="select select-solid-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

classDescription
selectSelect base class
select-primarySet primary color
select-secondarySet secondary color
select-successSet success color
select-errorSet error color
select-warningSet warning color
select-solidSet low gray background
select-solid-primarySet low blue background and high contrast text color
select-solid-secondarySet low purple background and high contrast text color
select-solid-successSet low green background and high contrast text color
select-solid-errorSet low red background and high contrast text color
select-solid-warningSet low yellow background and high contrast text color
select-ghost-primaryBorder hover primary
select-ghost-secondaryBorder hover secondary
select-ghost-successBorder hover success
select-ghost-errorBorder hover error
select-ghost-warningBorder hover warning
select-xsSet extra small size
select-smSet small size
select-mdSet medium size
select-lgSet large size
select-xlSet extra large size
select-roundedSet full rounded
select-blockMake select takes full width
SpinnersSidebar
Edit this page on GitHub