# 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