Input

Get user Input. Use with Field to access all functionalities

Examples

Base

Show code

HTML

<section>
    <o-field label="Name">
        <o-input v-model="name" />
    </o-field>

    <o-field label="Email" variant="danger" message="This email is invalid">
        <o-input type="email" model-value="john@" :maxlength="30" />
    </o-field>

    <o-field
        label="Username"
        variant="success"
        message="This username is available">
        <o-input model-value="johnsilver" :maxlength="30" />
    </o-field>

    <o-field label="Password">
        <o-input
            type="password"
            model-value="iwantmytreasure"
            password-reveal />
    </o-field>

    <o-field label="Message">
        <o-input
            :maxlength="200"
            type="textarea"
            placeholder="Enter some text..." />
    </o-field>

    <o-field>
        <o-input model-value="" placeholder="No label" />
    </o-field>

    <o-field label="Number">
        <o-input
            :model-value="42"
            number
            type="number"
            placeholder="Number"
            rounded />
    </o-field>

    <o-field label="Disabled">
        <o-input placeholder="Disabled" disabled />
    </o-field>

    <o-field label="Expanded">
        <o-input placeholder="Expanded" expanded />
    </o-field>

    <o-field label="Counter">
        <o-input
            placeholder="Counter"
            :maxlength="10"
            :maxitems="5"
            counter />
    </o-field>
</section>

JS

import { ref } from "vue";

const name = ref("John Silver");

Variants

Show code

HTML

<section>
    <o-field label="Primary" variant="primary">
        <o-input placeholder="Primary" />
    </o-field>

    <o-field label="Secondary" variant="secondary">
        <o-input placeholder="Secondary" />
    </o-field>

    <o-field label="Success" variant="success">
        <o-input placeholder="Success" />
    </o-field>

    <o-field label="Info" variant="info">
        <o-input placeholder="Info" />
    </o-field>

    <o-field label="Warning" variant="warning">
        <o-input placeholder="Warning" />
    </o-field>

    <o-field
        label="Error"
        variant="danger"
        message="You can have a message too">
        <o-input placeholder="Error" />
    </o-field>
</section>

Sizes

Show code

HTML

<section>
    <o-field>
        <o-input placeholder="small" size="small" icon="user" />
    </o-field>

    <o-field>
        <o-input placeholder="default" icon="user" />
    </o-field>

    <o-field>
        <o-input placeholder="medium" size="medium" icon="user" />
    </o-field>

    <o-field>
        <o-input placeholder="Large" size="large" icon="user" />
    </o-field>
</section>

With Icons

Show code

HTML

<section>
    <o-field>
        <o-input
            placeholder="Search..."
            type="search"
            icon="search"
            icon-clickable
            @icon-click="searchIconClick" />
    </o-field>

    <o-field>
        <o-input
            placeholder="Search..."
            type="search"
            icon-right="search"
            icon-right-clickable />
    </o-field>

    <o-field>
        <o-input
            v-model="email"
            placeholder="Email"
            type="email"
            icon="envelope"
            icon-right="times-circle"
            icon-right-clickable
            @icon-right-click="clearIconClick" />
    </o-field>
</section>

JS

import { ref } from "vue";

const email = ref("");

function searchIconClick(): void {
    alert("You wanna make a search?");
}

function clearIconClick(): void {
    email.value = "";
    alert("Email cleared!");
}

Class props

'Classes applied to the element'

Input component

Get user Input. Use with Field to access all functionalities

<o-input></o-input>

Props

Prop name	Description	Type	Values	Default
autocomplete			-	From config: input: {   autocomplete: "off" }
autosize			-	false
clearIcon			-	From config: input: {   clearIcon: "close-circle" }
clearable			-	From config: input: {   clearable: false }
counter			-	From config: input: {   counter: false }
customValidity			-	""
debounce			-	From config: autocomplete: {   debounce: 400 }
disabled			-	false
expanded			-	false
icon			-	From config: input: {   icon: undefined }
iconClickable			-	false
iconPack			-	From config: input: {   iconPack: undefined }
iconRight			-	From config: input: {   iconRight: undefined }
iconRightClickable			-	false
iconRightVariant			-
id			-	Default function (see source code)
maxlength			-
v-model			-
override			-
passwordReveal			-	false
placeholder			-
rounded			-	false
size			-	From config: input: {   size: undefined }
statusIcon			-	From config: {   statusIcon: true }
type			-	"text"
useHtml5Validation			-	From config: {   useHtml5Validation: true }
variant			-	From config: input: {   variant: undefined }

Events

Event name	Properties	Description
update:modelValue	value string | number - updated modelValue prop	modelValue prop two-way binding
input	value string | number - input value event Event - native event	on input change event
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

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$input-background-color	#ffffff
$input-border-color	var(--#{$prefix}grey-lighter)
$input-border-style	solid
$input-border-width	1px
$input-border-radius	var(--#{$prefix}base-border-radius)
$input-rounded-border-radius	var( --#{$prefix}base-border-radius-rounded)
$input-box-shadow	$control-box-shadow
$input-color	#363636
$input-icon-zindex	4
$input-height	$control-height
$input-line-height	var(--#{$prefix}base-line-height)
$input-margin	0
$input-padding	$control-padding-vertical $control-padding-horizontal
$input-counter-font-size	0.75rem
$input-counter-margin	0.25rem 0 0 0.5rem
$input-textarea-max-height	600px
$input-textarea-min-height	120px
$input-textarea-padding	0.625em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

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

Current theme ➜ Bootstrap

SASS Variable	Default
$input-icon-color	$input-color
$input-icon-spacer	0.75rem
$input-icon-padding-sm	2rem
$input-icon-padding	2.5rem
$input-icon-padding-lg	3rem

See ➜ 📄 Full scss file