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" value="john@" :maxlength="30" />
    </o-field>

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

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

    <o-field label="Message">
        <o-input :maxlength="200" type="textarea" />
    </o-field>

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

    <o-field label="Number">
        <o-input placeholder="Number" type="number" rounded />
    </o-field>

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

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

JS

import { ref } from "vue";

const name = ref("John Silver");

css

Variants

Show code

HTML

<section>
    <o-field label="Primary" variant="primary">
        <o-input placeholder="Primary" />
    </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>

js

css

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>

js

css

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() {
    alert("You wanna make a search?");
}

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

css

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
ariaLabelledby	Accessibility label to establish relationship between the checkbox and control label	string	-	Default function (see source code)
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 }
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	-
maxlength	Same as native maxlength, plus character counter	number|string	-
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 }
v-model		string|number	-	""
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: 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 Base

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

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS Variable	Default
$input-background-color	#ffffff
$input-border-color	$grey-lighter
$input-border-style	solid
$input-border-width	1px
$input-border-radius	$base-border-radius
$input-rounded-border-radius	$base-rounded-border-radius
$input-box-shadow	inset 0 1px 2px hsla(0, 0%, 4%, 0.1)
$input-color	#363636
$input-icon-zindex	4
$input-counter-font-size	0.75rem
$input-counter-margin	0.25rem 0 0 0.5rem
$input-height	$control-height
$input-line-height	$base-line-height
$input-margin	0
$input-padding	$control-padding-vertical $control-padding-horizontal
$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