Field
Fields are used to add functionality to controls and to attach/group components and elements together
edit on github
Examples
Base
Addons
Grouped
Slots
Props
Prop name | Description | Type | Values | Default |
variant | Color of the field and help message, also adds a matching icon, optional. Used by Input, Select and Autocomplete | string|object | primary , info , success , warning , danger , and any other custom color | |
label | Field label | string | - | |
labelFor | Same as native for set on the label | string | - | |
message | Help message text | string | - | |
grouped | Direct child components/elements of Field will be grouped horizontally (see which ones at the top of the page) | boolean | - | |
groupMultiline | Allow controls to fill up multiple lines, making it responsive | boolean | - | |
expanded | | boolean | - | |
horizontal | Group label and control on the same line for horizontal forms | boolean | - | |
addons | Field automatically attach controls together | boolean | - | true |
rootClass | | string | - | |
horizontalClass | | string | - | |
expandedClass | | string | - | |
groupMultilineClass | | string | - | |
labelClass | | string | - | |
labelHorizontalClass | | string | - | |
contentHorizontalClass | | string | - | |
messageClass | | string | - | |
variantClass | | string | - | |
Slots
Name | Description | Bindings |
label | | |
default | | |
message | | |
Style
CSS Variable | SASS Variable | Default |
--oruga-field-label-color | $field-label-color | #363636 |
--oruga-field-label-font-size | $field-label-font-size | $base-font-size |
--oruga-field-label-font-weight | $field-label-font-weight | 600 |
--oruga-field-margin-bottom | $field-margin-bottom | .75rem |
--oruga-field-message-font-size | $field-message-font-size | .75rem |
--oruga-field-message-margin-top | $field-message-margin-top | .25rem |
--oruga-field-horizontal-breakpoint | $field-horizontal-breakpoint | 768px |
--oruga-field-horizontal-label-margin | $field-horizontal-label-margin | 0 1.5rem 0 0 |