Select

Select an item in a dropdown list. Use with Field to access all functionalities

Examples

Base

Show code

HTML

<section>
    <o-field label="Simple">
        <o-select placeholder="Select a name" required>
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>

    <o-field
        label="Error"
        variant="danger"
        message="Something went wrong with this field">
        <o-select placeholder="Select a character" :options="options" />
    </o-field>

    <o-field label="Disabled">
        <o-select
            placeholder="Select a character"
            disabled
            :options="options" />
    </o-field>

    <o-field label="Disabled option">
        <o-select placeholder="Select a character">
            <option value="flint">Flint</option>
            <option value="silver" disabled>Silver</option>
        </o-select>
    </o-field>

    <o-field label="Rounded">
        <o-select
            placeholder="Select a character"
            rounded
            :options="options" />
    </o-field>

    <o-field label="Expanded">
        <o-select
            placeholder="Select a character"
            expanded
            :options="options" />
    </o-field>
</section>

JS

import type { OptionsItem } from "@oruga-ui/oruga-next";

const options: OptionsItem<string>[] = [
    { label: "Flint", value: "flint" },
    { label: "Silver", value: "silver" },
    { label: "Vane", value: "vane" },
    { label: "Billy", value: "billy" },
    { label: "Jack", value: "silver", attrs: { disabled: true } },
];

Grouped

Show code

HTML

<section>
    <o-field>
        <o-select
            v-model="selected"
            placeholder="Select a character"
            icon="user">
            <optgroup label="Black Sails">
                <option value="flint">Flint</option>
                <option value="silver">Silver</option>
                <option value="vane">Vane</option>
                <option value="billy">Billy</option>
                <option value="jack">Jack</option>
            </optgroup>

            <optgroup label="Breaking Bad">
                <option value="heisenberg">Heisenberg</option>
                <option value="jesse">Jesse</option>
                <option value="saul">Saul</option>
                <option value="mike">Mike</option>
            </optgroup>

            <optgroup label="Game of Thrones">
                <option value="tyrion-lannister">Tyrion Lannister</option>
                <option value="jamie-lannister">Jamie Lannister</option>
                <option value="daenerys-targaryen">
                    Daenerys Targaryen
                </option>
                <option value="jon-snow">Jon Snow</option>
            </optgroup>
        </o-select>
    </o-field>

    <p><b>Selected:</b> {{ selected }}</p>
</section>

JS

import { ref } from "vue";

const selected = ref<string>("");

Multiple

Show code

HTML

<section>
    <o-field label="Multiple">
        <o-select v-model="selected" multiple native-size="8">
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
            <option value="vane">Vane</option>
            <option value="billy">Billy</option>
            <option value="jack">Jack</option>
            <option value="heisenberg">Heisenberg</option>
            <option value="jesse">Jesse</option>
            <option value="saul">Saul</option>
            <option value="mike">Mike</option>
        </o-select>
    </o-field>

    <p><b>Selected:</b> {{ selected }}</p>
</section>

JS

import { ref } from "vue";

const selected = ref<string[]>([]);

Sizes

Show code

HTML

<section>
    <o-field label="Small">
        <o-select placeholder="Select a character" size="small">
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>

    <o-field label="Default">
        <o-select placeholder="Select a character">
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>

    <o-field label="Medium">
        <o-select placeholder="Select a character" size="medium">
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>

    <o-field label="Large">
        <o-select placeholder="Select a character" size="large">
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>
</section>

Variants

Show code

HTML

<section>
    <o-field label="Primary" variant="primary">
        <o-select placeholder="Select a character">
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>

    <o-field label="Secondary" variant="secondary">
        <o-select placeholder="Select a character">
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>

    <o-field label="Success" variant="success">
        <o-select placeholder="Select a character">
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>

    <o-field label="Info" variant="info">
        <o-select placeholder="Select a character">
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>

    <o-field label="Warning" variant="warning">
        <o-select placeholder="Select a character">
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>

    <o-field label="Danger" variant="danger">
        <o-select placeholder="Select a character">
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>
</section>

With Icons

Show code

HTML

<section>
    <o-field>
        <o-select placeholder="Select a name" icon="search" icon-clickable>
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>

    <o-field>
        <o-select
            placeholder="Select a name"
            icon="envelope"
            icon-right="times-circle"
            icon-right-clickable>
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>
</section>

Class props

'Classes applied to the element'

Select component

Select an item in a dropdown list. Use with Field to access all functionalities

<o-select></o-select>

Props

Prop name	Description	Type	Values	Default
autocomplete			-	From config: select: {   autocomplete: "off" }
customValidation			-	""
disabled			-	false
expanded			-	false
icon			-	From config: select: {   icon: undefined }
iconClickable			-	false
iconPack			-	From config: select: {   iconPack: undefined }
iconRight			-	From config: select: {   iconRight: undefined }
iconRightClickable			-	false
iconRightVariant			-
id			-	Default function (see source code)
v-model			-	null
nativeSize			-
options			-
override			-
placeholder			-
required			-	false
rounded			-	false
size			-	From config: select: {   size: undefined }
statusIcon			-	From config: {   statusIcon: true }
useHtml5Validation			-	From config: {   useHtml5Validation: true }
variant			-	From config: select: {   variant: undefined }

Events

Event name	Properties	Description
update:modelValue	value string | number | boolean | object | array - updated modelValue prop	modelValue prop two-way binding
focus	event Event - native event	on input focus event
blur	event Event - native event	on input blur event
invalid	event Event - native event	on input invalid event
icon-click	event Event - native event	on icon click event
icon-right-click	event Event - native event	on icon right click event

Slots

Name	Description	Bindings
placeholder	Override the placeholder
default	Override the options, default is options prop

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$select-background-color	#fff
$select-border-color	var(--#{$prefix}grey-lighter)
$select-border-style	solid
$select-border-width	1px
$select-border-radius	var(--#{$prefix}base-border-radius)
$select-rounded-border-radius	var( --#{$prefix}base-border-radius-rounded)
$select-box-shadow	$control-box-shadow
$select-color	#363636
$select-icon-zindex	4
$select-height	$control-height
$select-line-height	var(--#{$prefix}base-line-height)
$select-margin	0
$select-padding	$control-padding-vertical $control-padding-horizontal
$select-arrow-color	$select-color
$select-arrow-size	1rem
$select-placeholder-opacity	var(--#{$prefix}base-disabled-opacity)

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

The theme does not have any custom variables for this component.