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">
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>

    <o-field label="Grouped">
        <o-select 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>

    <o-field
        label="Error"
        variant="danger"
        message="Something went wrong with this field">
        <o-select placeholder="Select a character">
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>

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

    <o-field label="Disabled">
        <o-select placeholder="Select a character" disabled>
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </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="Expanded">
        <o-select placeholder="Select a character" expanded>
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>

    <o-field label="Size 'large'">
        <o-select placeholder="Large" size="large">
            <option value="flint">Flint</option>
            <option value="silver">Silver</option>
        </o-select>
    </o-field>

    <o-field label="Multiple">
        <o-select v-model="selectedOptions" 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>
</section>

JS

import { ref } from "vue";

const selectedOptions = ref([]);

css

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="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>

js

css

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
ariaLabelledby	Accessibility label to establish relationship between the input and control label	string	-	Default function (see source code)
autocomplete	Same as native autocomplete options to use in HTML5 validation	string	-	From config: select: {   autocomplete: "off" }
disabled	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	-
multiple	Allow multiple selection	boolean	-	false
nativeSize	Same as native size	string|number	-
options	Select options, unnecessary when default slot is used	string[] | OptionsItem[]	-
override	Override existing theme classes completely	boolean	-
placeholder	Text when nothing is selected	string	-
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 }
v-model		string|number|boolean|object|array	-	null
validationMessage	The message which is shown when a validation error occurs	string	-
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:modelValue	value string | number | boolean | object | Array<any> - 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 Base

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

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

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

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.