Input Box

A basic form control with disabled and readonly mode.

Validation State

A form control with success, warning and error state.

Checkboxes

For even more customization and cross browser consistency, use our completely custom checkbox element to replace the browser defaults.

Radios

For even more customization and cross browser consistency, use our completely custom radio element to replace the browser defaults.

Switches

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.

Select Menu

Custom select menus need only a custom class, .custom-select to trigger the custom styles.

Range

Create custom range controls with .custom-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers.

File Browser

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

Colorpicker

A simple component to select color in the same way you select color in Adobe Photoshop.

Basic Functionality

You can allow alpha transparency selection. Check out these example.

Show pallete only. If you'd like, spectrum can show the palettes you specify, and nothing else.