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 { OptionsProp } from "@oruga-ui/oruga-next";

const options: OptionsProp<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	Same as native autocomplete options to use in HTML5 validation	string	-	From config: select: {   autocomplete: "off" }
customValidity	Custom HTML 5 validation error to set on the form control	string | ((currentValue: unknown, state: ValidityState) => string)	-
disabled	Disable the input - same as native disabled	boolean	-	false
expanded	Makes input full width when inside a grouped or addon field	boolean	-	false
icon	Icon to be shown	string	-	From config: select: {   icon: undefined }
iconClickable	Makes the icon clickable	boolean	-	false
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: select: {   iconPack: undefined }
iconRight	Icon to be added on the right side	string	-	From config: select: {   iconRight: undefined }
iconRightClickable	Make the icon right clickable	boolean	-	false
iconRightVariant	Variant of right icon	string	-
id	Same as native id. Also set the for label for o-field wrapper - default is an uuid.	string	-	useId()
v-model	The input value state	unknown	-
multiple	Allow multiple selection - converts the modelValue into an array	boolean	-
nativeSize	Same as native size	number | string	-
options	Select options, unnecessary when default slot is used	OptionsPropWithGroups<unknown>	-
override	Override existing theme classes completely	boolean	-
placeholder	Text when nothing is selected	string	-
required	Same as native required	boolean	-	false
rounded	Makes the element rounded	boolean	-	false
size	Vertical size of input	string	small, medium, large	From config: select: {   size: undefined }
statusIcon	Show status icon using field and variant prop	boolean	-	From config: {   statusIcon: true }
useHtml5Validation	Enable HTML 5 native validation	boolean	-	From config: {   useHtml5Validation: true }
variant	Color of the control	string	primary, info, success, warning, danger, and any other custom color	From config: select: {   variant: undefined }

Events

Event name	Properties	Description
update:model-value	value T | T[] - 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.