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
Variants
Different styles can be achieved with the variant
prop.
Sizes
The component can be displayed in different sizes using the size
prop.
With Icons
Add an icon to the component to explain its function more visually.
Input component
Get user Input. Use with Field to access all functionalities.
html
<o-input></o-input>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
autocomplete | Native options to use in HTML5 validation | string | - | From config: input: { |
autosize | Automatically adjust height in textarea | boolean | - | false |
clearIcon | Icon name to be added on the clear button | string | - | From config: input: { |
clearable | Add a button/icon to clear the inputed text | boolean | - | From config: input: { |
counter | Show character counter when maxlength prop is passed | boolean | - | From config: input: { |
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: { |
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: { |
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: { |
iconRight | Icon to be added on the right side | string | - | From config: input: { |
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 | number | string | - | |
modelModifiers | Partial<Record<string, true>> | - |
| |
v-model | The input value state | number | string | - | |
number | Convert the ´modelValueinto type number` | 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: { |
statusIcon | Show status icon using field and variant prop | boolean | - | From config: { |
type | Input type, like native | string | Any native input type , and textarea | "text" |
useHtml5Validation | Enable HTML 5 native validation | boolean | - | From config: { |
variant | Color of the control | string | primary , info , success , warning , danger , and any other custom color | From config: input: { |
Events
Event name | Properties | Description |
---|---|---|
update:model-value | value string | number - updated modelValue prop | modelValue prop two-way binding |
input | value string - input valueevent 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
Class prop | Description | Props | Suffixes | |
---|---|---|---|---|
rootClass | Class of the root element. | |||
sizeClass | Class of the root element with size. | size | small | |
variantClass | Class of the root element with variant. 👉 Variant property should be applied to the wrapping field. | variant | primary | |
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 |
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.5rem |
$input-textarea-max-height | 600px |
$input-textarea-min-height | 120px |
$input-textarea-padding | 0.625em |
See ➜ 📄 Full 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 ➜ 📄 Full scss file