Field

Fields are 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" />
    </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="Wrong subject"
        variant="danger"
        message="Selected subject is wrong">
        <o-select placeholder="Select a subject">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </o-select>
    </o-field>
</section>

Addons

Show code

HTML

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

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

    <o-field addons>
        <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" />
        <o-button icon-left="italic" />
        <o-button icon-left="underline" />
        <o-button icon-left="align-left" />
        <o-button icon-left="align-center" />
        <o-button icon-left="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" />
            </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" />
            </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

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 group-multiline>
        <o-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

Show code

HTML

<section>
    <o-field
        horizontal
        label="Subject"
        variant="danger"
        message="Please enter a subject">
        <o-input name="subject" expanded />
    </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" />
    </o-field>

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

Slots

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" />
    </o-field>

    <o-field>
        <template #label> Label with custom <i>style</i> </template>
        <o-input />
        <template #message> Message with custom <b>style</b> </template>
    </o-field>
</section>

Class props

'Classes applied to the element'

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
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: {   labelsize: undefined }
message	Help message text	string	-
messageTag	Message element tag name	DynamicComponent	-	From config: field: {   messageTag: "p" }
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: field: {   mobileBreakpoint: undefined }
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 ➜ Bulma

SASS Variable	Default
$floating-in-height	3.25em

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