Field

The Field component is used to add functionality to controls and to attach/group components and elements together.

Examples

Base

Show code

HTML

<section>
    <o-field label="Name">
        <o-input model-value="Kevin Garvey" />
    </o-field>

    <o-field label="Email" variant="danger" message="This email is invalid">
        <o-input type="email" model-value="john@" :maxlength="30" />
    </o-field>

    <o-field
        label="Username"
        variant="success"
        message="This username is available">
        <o-input model-value="johnsilver" :maxlength="30" />
    </o-field>

    <o-field label="Password" variant="warning">
        <o-input
            model-value="123"
            type="password"
            :maxlength="30"
            autocomplete="off" />
    </o-field>

    <o-field label="Subject">
        <o-select placeholder="Select a subject">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </o-select>
    </o-field>

    <o-field
        label="Multiple Messages"
        variant="danger"
        :message="['Selected option is wrong', 'Option is required']">
        <o-select placeholder="Select an option">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </o-select>
    </o-field>
</section>

Addons

Use the addons prop to attach multiple controls together.

Show code

HTML

<section>
    <o-field variant="danger" addons label="Search input">
        <o-input placeholder="Search..." type="search" icon="search" />
        <o-button variant="primary" label="Search" />
    </o-field>

    <o-field addons label="Email input">
        <o-input placeholder="This is expanded" expanded />
        <o-button label="@gmail.com" />
    </o-field>

    <o-field addons label="Currency transfer">
        <o-select placeholder="Currency">
            <option>$</option>
            <option>£</option>
            <option>€</option>
        </o-select>
        <o-input type="number" placeholder="0,00" />
        <o-button variant="success" label="Transfer" />
    </o-field>

    <o-field addons>
        <o-button icon-left="bold" aria-label="text bold" />
        <o-button icon-left="italic" aria-label="text italic" />
        <o-button icon-left="underline" aria-label="text underline" />
        <o-button icon-left="align-left" aria-label="text align left" />
        <o-button icon-left="align-center" aria-label="text align center" />
        <o-button icon-left="align-right" aria-label="text align right" />

        <o-input placeholder="Search..." type="search" icon="search" />
    </o-field>

    <o-field addons>
        <o-button variant="primary" label="Button" />
        <o-dropdown>
            <template #trigger>
                <o-button
                    variant="primary"
                    icon-right="caret-down"
                    aria-label="Action Button" />
            </template>

            <o-dropdown-item label="Action" />
            <o-dropdown-item label="Another action" />
            <o-dropdown-item label="Something else" />
        </o-dropdown>
    </o-field>

    <o-field addons>
        <o-button variant="primary" label="Button" />
        <o-dropdown>
            <template #trigger>
                <o-button
                    variant="primary"
                    icon-right="caret-down"
                    aria-label="Action Button" />
            </template>

            <o-dropdown-item label="Action" />
            <o-dropdown-item label="Another action" />
            <o-dropdown-item label="Something else" />
        </o-dropdown>
        <o-button variant="primary" label="Button" />
    </o-field>

    <o-field addons>
        <o-dropdown>
            <template #trigger>
                <o-button icon-right="caret-down" label="Filters" />
            </template>

            <o-dropdown-item
                value="open_issues"
                label="Open Issues and Pull Requests" />
            <o-dropdown-item value="your_issues" label="Your Issues" />
            <o-dropdown-item
                value="pull_requests"
                label="Your Pull Requests" />
            <o-dropdown-item value="everything" label="Everything" />
        </o-dropdown>
        <o-input icon="search" type="search" placeholder="Search..." />
    </o-field>
</section>

Grouped

Use the grouped prop to group several controls that belong together.

Show code

HTML

<section>
    <o-field grouped variant="danger" message="What do you want to search?">
        <o-input placeholder="Search..." />
        <o-button variant="primary" label="Search" />
    </o-field>

    <o-field grouped message="What do you want to search?">
        <o-input placeholder="Search..." expanded />
        <o-button variant="primary" label="Search" />
    </o-field>

    <o-field grouped multiline>
        <o-input aria-label="some input" />
        <o-button>First</o-button>
        <o-button>Second</o-button>
        <o-button>Third</o-button>
        <o-button>Fourth</o-button>
        <o-button>Fifth</o-button>
        <o-button>Sixth</o-button>
        <o-button>Seventh</o-button>
        <o-button>Eighth</o-button>
    </o-field>
</section>

Horizontal

When the horizontal prop is set, the component will align horizontally.

Show code

HTML

<section>
    <o-field
        horizontal
        label="Subject"
        variant="danger"
        message="Please enter a subject">
        <o-input
            name="subject"
            expanded
            placeholder="Please enter a subject..." />
    </o-field>

    <o-field horizontal label="From">
        <o-input name="name" placeholder="Name" expanded />
        <o-input
            name="email"
            type="email"
            placeholder="nobody@nowhere.com"
            expanded />
    </o-field>

    <o-field horizontal label="Topic">
        <o-select placeholder="Select a topic">
            <option value="1">Oruga</option>
            <option value="2">Vue.js</option>
            <option value="3">UI</option>
        </o-select>
    </o-field>

    <o-field horizontal label="Message">
        <o-input type="textarea" placeholder="Enter a messasge..." />
    </o-field>

    <o-field horizontal>
        <o-button
            variant="primary"
            icon-left="envelope"
            label="Send message"
            outlined />
    </o-field>
</section>

Templates

The label and the message can be customised using template slots if needed.

Show code

HTML

<section>
    <o-field horizontal>
        <template #label>
            With tooltip
            <o-tooltip label="Help text here for explanation">
                <o-icon size="small" icon="question-circle" />
            </o-tooltip>
        </template>

        <o-input size="medium" placeholder="Label with tooltip" />
    </o-field>

    <o-field>
        <template #label> Label with custom <i>style</i> </template>

        <template #default>
            <o-input placeholder="Custom label and message" />
        </template>

        <template #message> Message with custom <b>style</b> </template>
    </o-field>
</section>

Field Component

Fields are used to add functionality to controls and to attach/group components and elements together.

<o-field></o-field>

Props

Prop name	Description	Type	Values	Default
addons	Field automatically attach controls together	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	-
labelId	A unique HTML id for the field label to associate an input with	string	-	useId()
labelSize	Size of the field label	string	small, medium, large	From config: field: {   labelSize: undefined }
message	Help message text	string | string[]	-
messageId	A unique HTML id for the field message to associate an input with	string	-	useId()
messageSize	Size of the field message	string	small, medium, large	From config: field: {   messageSize: undefined }
messageTag	Message element tag name	DynamicComponent	-	From config: field: {   messageTag: "p" }
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: field: {   mobileBreakpoint: undefined }
multiline	Allow controls to fill up multiple lines, making it responsive	boolean	-	false
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
message	Override the message	message string | string[] | undefined - message property
default	Default content

Class Inspector

Classes applied to the element:

➜ Want to know how does the Class Inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
mobileClass	Class of the root element when on mobile. 👉 Switch to mobile view to see it in action!
focusedClass	Class of the root element when the form element is focused. 👉 Will be controlled by the focus event emitted by form elements.
filledClass	Class of the root element when the form element is filled. 👉 Will be controlled by the form element.
variantClass	Class of the root element with variant.	variant	primary info warning danger
bodyClass	Class for the body wrapper element.
groupedClass	Class of the inner body wrapper when grouped.	grouped
addonsClass	Class of the inner body wrapper element when element get automatically attached together inside a field.
multilineClass	Class for inner body wrapper element to fill up multiple lines.	multiline
horizontalClass	Class to align label and control in horizontal forms.	horizontal
horizontalLabelClass	Class for the label element when horizontal.	horizontal
horizontalBodyClass	Class for the body element when horizontal.	horizontal
labelClass	Class for the label element.	label
labelSizeClass	Class for the label element with size.	label labelSize	small medium large
labelVariantClass	Class of the label element with variant.	label variant	primary info warning danger
messageClass	Class of the the message element.	message
messageSizeClass	Class for the message element with size.	message messageSize	small medium large
messageVariantClass	Class of the message element with variant.	message variant	primary info warning danger

Sass Variables

Current theme ➜ Oruga

SASS Variable	Default
$field-spacer	h.useVar("control-spacer")
$field-margin-bottom	calc(1.5 * $field-spacer)
$field-label-color	h.useVar("font-color")
$field-label-font-size	h.useVar("font-size")
$field-label-font-weight	600
$field-label-line-height	h.useVar("line-height")
$field-message-spacer	calc(0.5 * $field-spacer)
$field-message-color	h.useVar("secondary")
$field-message-font-size	0.75em
$field-message-font-weight	h.useVar("font-weight")
$field-message-line-height	h.useVar("line-height")

See ➜ 📄 SCSS file

Current theme ➜ Bulma

SASS Variable	Default
$floating-in-height	3.25em

See ➜ 📄 SCSS file

Current theme ➜ Bootstrap

SASS Variable	Default
$input-field-margin-bottom	$spacer
$input-field-grouped-spacer	calc($spacer / 2)

See ➜ 📄 SCSS file