Field
Fields are used to add functionality to controls and to attach/group components and elements together
## Examples
Base
Show code
Addons
Show code
Grouped
Show code
Horizontal
Show code
Slots
Show code
## Class props
## 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 | Message element tag name | 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