Field

Usage

Input

<form novalidate name="inputForm">
    <oui-field label="Lastname"
        help-text="At least 3 chars"
        size="xl">
        <input
            class="oui-input"
            type="text"
            id="lastname"
            name="lastname"
            ng-model="$ctrl.user.lastname"
            required
            minlength="3"
            maxlength="32">
    </oui-field>

    <oui-field label="Email" size="xl">
        <input
            class="oui-input"
            type="email"
            id="email"
            name="email"
            ng-model="$ctrl.user.email">
    </oui-field>

    <oui-field label="Username"
        error-messages="{pattern: 'Username must be alphabetic with a length between 3 and 8.'}"
        size="xl">
        <input
            class="oui-input"
            type="text"
            id="username"
            name="username"
            ng-model="$ctrl.user.username"
            ng-pattern="/^[a-zA-Z]{3,8}$/">
    </oui-field>
</form>

Label Popover

<form novalidate name="inputForm">
    <oui-field label="Lastname"
        help-text="At least 3 chars"
        label-popover="In the LastName field, enter your family name as the family name appears on your passport. The last name is required to complete the application."
        size="xl">
        <input
            class="oui-input"
            type="text"
            id="lastname"
            name="lastname"
            ng-model="$ctrl.user.lastname"
            required
            minlength="3"
            maxlength="32">
    </oui-field>
</form>

Checkbox

<form novalidate name="checkboxForm">
    <oui-field label="Server options">
        <oui-checkbox
            name="ssl"
            text="SSL"
            model="$ctrl.ssl"
            required></oui-checkbox>
        <oui-checkbox
            name="hsts"
            text="HSTS"
            model="$ctrl.hsts"></oui-checkbox>
    </oui-field>
</form>

Switch

<form novalidate name="switchForm">
    <oui-field label="Switch options" help-text="Helper text">
        <oui-switch
            name="switch"
            model="$ctrl.switch"
            required></oui-switch>
    </oui-field>
</form>

Radio

<form novalidate name="radioForm">
    <oui-field label="Protocol">
        <oui-radio
            name="protocol"
            text="HTTP"
            model="$ctrl.protocol"
            value="'http'"></oui-radio>
        <oui-radio
            name="protocol"
            text="TCP"
            model="$ctrl.protocol"
            value="'tcp'"></oui-radio>
        <oui-radio
            name="protocol"
            text="UDP"
            model="$ctrl.protocol"
            value="'udp'"
            disabled></oui-radio>
    </oui-field>
</form>

Textarea

<form novalidate name="textareaForm">
    <oui-field label="Server description" size="xl">
        <textarea
            class="oui-textarea"
            id="description"
            name="description"
            ng-model="$ctrl.server.description"
            required>
        </textarea>
    </oui-field>

    <oui-field label="{{'Cluster description'}}" size="xl">
        <oui-textarea
            model="$ctrl.text2"
            id="description-2"
            name="description-2"
            placeholder="Please insert your text..."
            maxlength="10"
            required></oui-textarea>
    </oui-field>
</form>

Select

<form novalidate name="selectForm">
    <oui-field label="OS" size="m">
        <label class="oui-select">
            <select
                id="os"
                name="os"
                ng-model="os"
                class="oui-select__input"
                required>
                <option ng-value="undefined">Select the OS</option>
                <option value="freebsd">FreeBSD</option>
                <option value="linux">Linux</option>
                <option value="osx">OSX</option>
                <option value="windows">Windows</option>
            </select>
            <span class="oui-icon oui-icon-chevron-down" aria-hidden="true"></span>
        </label>
    </oui-field>

    <oui-field label="Recovery OS" size="m">
        <oui-select name="recovery_os"
            model="$ctrl.recoveryOs"
            title="Select the recovery OS"
            placeholder="Select the recovery OS..."
            items="$ctrl.osList"
            match="label"
            required>
        </oui-select>
    </oui-field>

    <oui-field label="Recovery OS" size="m">
        <oui-select name="recovery_os2"
            model="$ctrl.recoveryOs2"
            title="Select the recovery OS"
            placeholder="Select the recovery OS..."
            items="$ctrl.osList"
            match="label"
            required
            multiple>
        </oui-select>
    </oui-field>
</form>

Input numeric

<form novalidate name="numericForm">
    <oui-field label="Number of servers"
        help-text="Select the number of servers in your cluster">
        <oui-numeric
            id="serversCount"
            name="serversCount"
            model="$ctrl.serversCount"
            min="1">
        </oui-numeric>
    </oui-field>
</form>

Input calendar

<form novalidate name="calendarForm">
    <oui-field label="Automatic renewal"
        size="xl">
        <oui-calendar
            id="date"
            name="date"
            model="$ctrl.dateModel"
            required>
        </oui-calendar>
    </oui-field>
<form>

Submit button

<form novalidate name="simpleForm">
    <oui-field label="{{'Lastname'}}"
        help-text="At least 3 chars"
        size="xl">
        <input
            class="oui-input"
            type="text"
            id="lastname"
            name="lastname"
            ng-model="$ctrl.user.lastname"
            required
            minlength="3"
            maxlength="32">
    </oui-field>
    <button type="submit" class="oui-button oui-button_primary">Submit</button>
</form>

API

Attribute	Type	Binding	One-time binding	Values	Default	Description
label	string	@?	no	n/a	n/a	field label
label-popover	string	@?	no	n/a	n/a	text to describe the field or give more information
help-text	string	@?	no	n/a	n/a	text to help fill the form field
size	string	@?	yes	xs, s, m, l, xl, auto	auto	field size
error-messages	object	<?	no	n/a	n/a	dictionary to override default messages

Configuration

The validation messages can be globally configured with a provider.

angular.module("myModule", [
    "oui.field"
]).config(ouiFieldConfigurationProvider => {
    ouiFieldConfigurationProvider.setTranslations({ // default translations
        errors: {
            required: "Mandatory.",
            number: "Invalid number.",
            email: "Invalid email.",
            min: "Too low ({{min}} min).",
            max: "Too high ({{max}} max).",
            minlength: "Too short ({{minlength}} characters min).",
            maxlength: "Too high ({{maxlength}} characters max).",
            pattern: "Invalid format."
        }
    });
});