Input

The Input component uses HTML's native text input. It allows a user to enter a single line of text. Combine it with the Field component to access all functionalities.

Examples

Base

Show code

HTML

<section>
    <o-field label="Name">
        <o-input model-value="John Silver" />
    </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>

Variants

Different styles can be achieved with the variant prop.

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

The component can be displayed in different sizes using the size prop.

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

Add an icon to the component to explain its function more visually.

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!");
}

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: InputType<IsNumber> | null , state: ValidityState) => string) | undefined	-	""
debounce	Number of milliseconds to delay before the value get emitted	number	-	From config: autocomplete: {   debounce: undefined }
disabled	Same as native disabled	boolean	-	false
expanded	Makes input full width when inside a grouped or addon field	boolean	-	From config: input: {   expanded: 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 pass the id to a wrapping o-field component. Default is a uuid.	string	-	useId()
maxlength	Same as native maxlength, plus character counter	number | string	-
modelModifiers		Partial<Record<string, true>>	-
v-model	The input value state	number | string	-
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 variant 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:model-value	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

Class Inspector

Classes applied to the element:

➜ Want to know how does the Class Inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
sizeClass	Class of the root element with size.	size	small medium large
variantClass	Class of the root element with variant. 👉 Variant property should be applied to the wrapping field.	variant	primary info warning danger
expandedClass	Class of the root element when expanded.	expanded
disabledClass	Class of the root element when disabled.	disabled
roundedClass	Class of the root element when rounded.	rounded
textareaClass	Class of the root element when type `textarea`.	type
hasIconRightClass	Class to the root element when a right icon is used.	iconRight
inputClass	Class of the native input element.
placeholderClass	Class of the native input element with a placeholder.
iconLeftSpaceClass	Class of the native input element with left icon space.	icon
iconRightSpaceClass	Class of the native input element with right icon space.	iconRight
iconLeftClass	Class of the left icon element.	icon
iconRightClass	Class of the right icon element.	iconRight
counterClass	Class of the counter element.	counter maxlength

Sass Variables

Current theme ➜ Oruga

SASS Variable	Default
$input-color	h.useVar("font-color")
$input-font-size	h.useVar("font-size")
$input-font-weight	h.useVar("font-weight")
$input-line-height	h.useVar("line-height")
$input-height	h.useVar("control-height")
$input-padding	h.useVar("control-padding-vertical") h.useVar("control-padding-horizontal")
$input-disabled-opacity	h.useVar("control-disabled-opacity")
$input-box-shadow	h.useVar("control-box-shadow-inset")
$input-border-width	h.useVar("control-border-width")
$input-border-style	solid
$input-border-color	h.useVar("control-border-color")
$input-border-radius	h.useVar("border-radius")
$input-border-radius-rounded	h.useVar("border-radius-rounded")
$input-background-color	h.useVar("control-brackground-color")
$input-textarea-min-height	120px
$input-textarea-max-height	600px
$input-textarea-padding	h.useVar("control-spacer")
$input-counter-font-size	0.75rem
$input-counter-padding	0.25rem 0.5rem

See ➜ 📄 SCSS file

Current theme ➜ Bulma

SASS Variable	Default
$input-colors	dv.$colors

See ➜ 📄 SCSS file

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 ➜ 📄 SCSS file