Theme ➜ Bulma
Input
Get user Input. Use with Field to access all functionalities
Examples
Base
This email is invalid
This username is available
Show code
Variants
You can have a message too
Show code
Sizes
Show code
With Icons
Show code
Class props
| Class prop | Description | Props | Suffixes | |
|---|---|---|---|---|
| counterClass | Class of the counter element. | counter | ||
| disabledClass | Class of input when disabled . | disabled | ||
| expandedClass | Class of input when expanded. | expanded | ||
| iconLeftClass | Class of the left icon. | icon | ||
| iconLeftSpaceClass | Class of the left icon space inside the input. | icon | ||
| iconRightClass | Class of the right icon. | iconRight | ||
| iconRightSpaceClass | Class of the right icon space inside the input. | iconRight | ||
| inputClass | Class of the native input element. | |||
| rootClass | Class of the root element. | |||
| roundedClass | Class of input when rounded. | rounded | ||
| sizeClass | Class of the input size. | size | small | |
| textareaClass | Class of input when type textarea . | type | ||
| variantClass | Class of the input variant. 👉 Variant property should be applied to the wrapping field | variant | primary |
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 | 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: { |
| 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 |
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