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	Native options to use in HTML5 validation	string	-	From config: input: {   autocomplete: "off" }
autosize	Automatically adjust height in textarea	boolean	-	false
clearIcon	Icon name to be added on the clear button	string	-	From config: input: {   clearIcon: "close-circle" }
clearable	Add a button/icon to clear the inputed text	boolean	-	From config: input: {   clearable: false }
counter	Show character counter when maxlength prop is passed	boolean	-	From config: input: {   counter: false }
customValidity	Custom HTML 5 validation error to set on the form control	string | ((currentValue: string | number | null, state: ValidityState) => string) | undefined	-	""
debounce	Number of milliseconds to delay before to emit input event	number	-	From config: autocomplete: {   debounce: 400 }
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: input: {   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: input: {   iconPack: undefined }
iconRight	Icon to be added on the right side	string	-	From config: input: {   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()
maxlength	Same as native maxlength, plus character counter	string | number	-
modelModifiers		Record<string, true>	-
v-model	The input value state	string | number	-
number	Convert the ´modelValueinto typenumber`	boolean	-
override	Override existing theme classes completely	boolean	-
passwordReveal	Adds the reveal password functionality	boolean	-	false
placeholder	Input placeholder	string	-
rounded	Makes the element rounded	boolean	-	false
size	Size of the control	string	small, medium, large	From config: input: {   size: undefined }
statusIcon	Show status icon using field and variant prop	boolean	-	From config: {   statusIcon: true }
type	Input type, like native	string	Any native input type, and textarea	"text"
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: input: {   variant: undefined }

Events

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