Select - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

<div class="ts-select">
    <select>
        <option>Apple</option>
        <option>Watermelon</option>
        <option>Banana</option>
    </select>
</div>

Types

Multiple

A select input can allow multiple selections with the [multiple] attribute.

<div class="ts-select">
    <select size="3" multiple>
        <option>Item A</option>
        <option>Item B</option>
        <option>Item C</option>
    </select>
</div>

States

Disabled

A disabled select input does not allow user interaction.

<div class="ts-select">
    <select disabled>
        <option>MySpace</option>
        <option>Facebook</option>
        <option>Twitter</option>
    </select>
</div>

Active

An active select input shows what the user is interacting with.

<div class="ts-select is-active">
    <select>
        <option>TeaMeow</option>
        <option>Tunalog</option>
        <option>EnekoCore</option>
    </select>
</div>

Variations

Solid

A select input can have a solid background.

<div class="ts-select is-solid">
    <select>
        <option>Golang</option>
        <option>PHP</option>
        <option>Node.js</option>
    </select>
</div>

Underlined

A select input can have a solid background and an underline.

<div class="ts-select is-underlined">
    <select>
        <option>Taitung</option>
        <option>Kaohsiung</option>
        <option>Tainan</option>
    </select>
</div>

Basic

A basic select input has no padding or borders, except for the caret icon.

<div class="ts-select is-basic">
    <select>
        <option>AMD</option>
        <option>Intel</option>
    </select>
</div>

Negative

A select input can show the data contains errors.

<div class="ts-select is-negative">
    <select>
        <option>Yami Odymel</option>
        <option>Mac Taylor</option>
        <option>Val Pyen</option>
    </select>
</div>

Fluid

A select input can take the width of its container.

<div class="ts-select is-fluid">
    <select>
        <option>Kaede Sendoin</option>
        <option>Anko Tsubuzaki</option>
        <option>Wakaba Subaru</option>
    </select>
</div>

Sizes

A select input can have different sizes.

<div class="ts-select is-small">
    <select>
        <option>Small</option>
    </select>
</div>
<div class="ts-select">
    <select>
        <option>Default</option>
    </select>
</div>
<div class="ts-select is-large">
    <select>
        <option>Large</option>
    </select>
</div>

Density

A select input can adjust its height for a tighter or more relaxed look.

<div class="ts-select is-dense">
    <select>
        <option>Dense</option>
    </select>
</div>
<div class="ts-space"></div>
<div class="ts-select">
    <select>
        <option>Default</option>
    </select>
</div>
<div class="ts-space"></div>
<div class="ts-select is-relaxed">
    <select>
        <option>Relaxed</option>
    </select>
</div>

Looking for similar components?

Dropdown