Component documentation

Basics

Components

Objects

Utilities

A text input.

Text input

A standard text input. Use for single line text. Avoid using the placeholder attribute, unless really necessary.

Label

<div class="o-form-group-layout o-form-group-layout--standard">
    <div class="o-form-group">
        <label class="o-form-group__label" for="textFieldId">Label</label>
        <div class="o-form-group__controls">
            <input class="c-input" type="text" value="Default Input" id="textFieldId" />
        </div>
    </div>
    <div class="o-form-group">
        <label class="o-form-group__label" for="textFieldId">Label</label>
        <div class="o-form-group__controls">
            <input class="c-input" type="text" disabled="disabled" value="Default Input" id="textFieldId" />
        </div>
    </div>
</div>

.o-form-group-layout.o-form-group-layout--standard
    .o-form-group
        label.o-form-group__label(for="textFieldId") Label
        .o-form-group__controls
            input.c-input(type="text" value="Default Input" id="textFieldId")
    .o-form-group
        label.o-form-group__label(for="textFieldId") Label
        .o-form-group__controls
            input.c-input(type="text" disabled value="Default Input" id="textFieldId")