Theme ➜ Bulma
Field
Fields are used to add functionality to controls and to attach/group components and elements together
Examples
Base
This email is invalid
This username is available
Selected subject is wrong
Show code
Addons
Show code
Grouped
What do you want to search?
What do you want to search?
Show code
Horizontal
Please enter a subject
Show code
Slots
Message with custom style
Show code
Class props
| Class prop | Description | Props | Suffixes | |
|---|---|---|---|---|
| addonsClass | Class for components automatically attached together when inside a field. 👉 Use the expanded prop on the control to fill up the remaining space | |||
| bodyClass | Class for field body. | |||
| filledClass | Class for the filled field. 👉 when it contains a input | |||
| focusedClass | Class for the focused field. 👉 focus event emitted by form elements | |||
| groupMultilineClass | Class when fields fill up multiple lines. | groupMultiline | ||
| groupedClass | Class when fields are grouped together. | grouped | ||
| horizontalBodyClass | Class for field body when horizontal. 🔍 Classes applied have a higher specificity than expected when horizontal is applied | horizontal | ||
| horizontalClass | Class to align label and control in horizontal forms. 🔍 Classes applied have a higher specificity than expected when horizontal is applied | horizontal | ||
| horizontalLabelClass | Class for field label when horizontal. 🔍 Classes applied have a higher specificity than expected when horizontal is applied | horizontal | ||
| labelClass | Class for field label. | |||
| labelSizeClass | Class for field label size. | labelSize | small | |
| labelVariantClass | Class of the label field variant. | variant | primary | |
| messageClass | Class for the field message. | message | ||
| messageVariantClass | Class of the message field variant. | variant | primary | |
| mobileClass | Class of file component when on mobile. 👉 Switch to mobile view to see it in action! | |||
| rootClass | Class of the root element. |
Field component
Fields are used to add functionality to controls and to attach/group components and elements together
html
<o-field></o-field>Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| addons | Field automatically attach controls together | boolean | - | false |
| groupMultiline | Allow controls to fill up multiple lines, making it responsive | boolean | - | false |
| grouped | Direct child components/elements of Field will be grouped horizontally (see which ones at the top of the page). | boolean | - | false |
| horizontal | Group label and control on the same line for horizontal forms | boolean | - | false |
| label | Field label | string | - | |
| labelFor | Same as native for set on the label | string | - | |
| labelSize | Vertical size of input | string | small, medium, large | From config: field: { |
| message | Help message text | string | - | |
| messageTag | DynamicComponent | - | From config: field: { | |
| mobileBreakpoint | Mobile breakpoint as max-width value | string | - | From config: field: { |
| override | Override existing theme classes completely | boolean | - | |
| variant | Color of the field and help message, also adds a matching icon. Used by Input, Select and Autocomplete. | string | primary, info, success, warning, danger, and any other custom color |
Slots
| Name | Description | Bindings |
|---|---|---|
| label | Override the label | label string - label property |
| message | Override the message | message string - field message |
| default | Default content |
Sass variables
Current theme ➜ Oruga
| SASS Variable | Default |
|---|---|
| $field-label-color | #363636 |
| $field-label-font-weight | 600 |
| $field-margin-bottom | 0.75rem |
| $field-message-font-size | 0.75rem |
| $field-message-margin-top | 0.25rem |
| $field-margin-right | 0.37rem |
| $field-horizontal-label-margin | 0 1.5rem 0 0 |
See ➜ 📄 Full scss file
Current theme ➜ Bootstrap
| SASS Variable | Default |
|---|---|
| $input-field-grouped-spacer | 0.5rem |
| $input-field-margin-bottom | $spacer |
| $input-field-btn-border-color | $input-border-color |
See ➜ 📄 Full scss file