OrugaField
Fields are used to add functionality to controls and to attach/group components and elements together
Base
Addons
Grouped
Horizontal
Slots
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 |
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 |
Style
| CSS Variable | SASS Variable | Default |
|---|---|---|
| --oruga-field-label-color | $field-label-color | #363636 |
| --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-margin-right | $field-margin-right | .37rem |
| --oruga-field-horizontal-label-margin | $field-horizontal-label-margin | 0 1.5rem 0 0 |