Field
Fields are used to add functionality to controls and to attach/group components and elements together
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. | |||
bodyHorizontalClass | Class for field body when horizontal. 🔍 Classes applied have a higher specificity than expected when mobileClass is applied | horizontal | ||
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 | ||
horizontalClass | Class to align label and control in horizontal forms. 🔍 Classes applied have a higher specificity than expected when mobileClass is applied | horizontal | ||
labelClass | Class for field label. | |||
labelHorizontalClass | Class for field label when horizontal. 🔍 Classes applied have a higher specificity than expected when mobileClass is applied | horizontal | ||
labelSizeClass | Class for field label size. | labelSize | small | |
messageClass | Class for the field message. | message | ||
mobileClass | Class of file component when on mobile. 👉 Switch to mobile view to see it in action! | |||
rootClass | Class of the root element. | |||
variantLabelClass | Class of the label field variant. | variant | primary | |
variantMessageClass | Class of the message field variant. | variant | primary |
Field component
html
<o-field></o-field>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
addons | Field automatically attach controls together | boolean | - | true |
groupMultiline | Allow controls to fill up multiple lines, making it responsive | boolean | - | |
grouped | Direct child components/elements of Field will be grouped horizontally (see which ones at the top of the page) | boolean | - | |
horizontal | Group label and control on the same line for horizontal forms | boolean | - | |
label | Field label | string | - | |
labelFor | Same as native for set on the label | string | - | |
labelSize | Vertical size of input, optional | string | small , medium , large | |
message | Help message text | string | - | |
mobileBreakpoint | Mobile breakpoint as max-width value | string | - | |
override | boolean | - | ||
variant | Color of the field and help message, also adds a matching icon, optional. Used by Input, Select and Autocomplete | string | primary , info , success , warning , danger , and any other custom color |
Slots
Name | Description | Bindings |
---|---|---|
label | ||
default | ||
message |
Sass variables
Current theme ➜ Oruga Base
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 ➜ Oruga Full
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 ➜ Bulma
The theme does not have any custom variables for this component.
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