Form Elements

Basic Form Elements

Add class focus on the label to change the color of the label.

Default text input

Password input

Textarea

<div class="form-group">
    <label>
        Default text input
        <span class="reference-mark text-warning">
            <span aria-label="icon-asterisk" class="lexicon-icon-container" role="img">
                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-asterisk">
                    <use xlink:href="../../images/icons/icons.svg#asterisk" />
                </svg>
            </span>
        </span>
    </label>
    <input class="form-control" placeholder="Placeholder" type="text">
</div>

<div class="form-group">
    <label>Password input</label>
    <input class="form-control" placeholder="Enter password" type="password">
</div>

<div class="form-group">
    <label>Textarea</label>
    <textarea class="form-control" placeholder="Placeholder"></textarea>
</div>

<div class="checkbox">
    <label>
        <input type="checkbox" value="">
        Label with class checkbox
    </label>
</div>

<div class="radio">
    <label>
        <input type="radio">
        Regular Radio Button
    </label>
</div>

Select Box

Regular Select Box

Select Box with Multiple Select Options

<div class="form-group">
    <label>Regular Select Box</label>
    <select class="form-control">
        <option>Sample 1</option>
        <option>Sample 2</option>
        <option>Sample 3</option>
        <option>Sample 4</option>
    </select>
</div>

<div class="form-group">
    <label>Select Box with Multiple Select Options</label>
    <select class="form-control" multiple>
        <option>Sample 1</option>
        <option>Sample 2</option>
        <option>Sample 3</option>
        <option>Sample 4</option>
        <option>Sample 5</option>
        <option>Sample 6</option>
        <option>Sample 7</option>
        <option>Sample 8</option>
    </select>
</div>

File Upload

<div class="form-group">
    <label class="sr-only">FILE UPLOAD</label>

    <input id="inputFile" type="file">
</div>

Disabled Inputs

Add class disabled on the label to match the opacity to disabled input.

Text Input

Password Input

Textarea

Regular Select Box

Select Box with Multiple Select Options

<div class="form-group">
      <label class="disabled">Disabled Text Input</label>
      <input disabled class="form-control" placeholder="Placeholder" type="text">
</div>

<div class="form-group">
    <label class="disabled">Password Input</label>
    <input class="form-control" disabled placeholder="Enter password" type="password">
</div>

<div class="form-group">
    <label class="disabled">Textarea</label>
    <textarea class="form-control" disabled placeholder="Placeholder"></textarea>
</div>

Disabled Fieldset

<form>
    <fieldset disabled="">
        <div class="form-group">
            <label for="disabledTextInput">Disabled input</label>
            <input class="form-control" id="disabledTextInput" placeholder="Disabled input" type="text">
        </div>

        <div class="form-group">
            <label for="disabledSelect">Disabled select menu</label>
            <select class="form-control" id="disabledSelect">
                <option>Disabled select</option>
            </select>
        </div>

        <div class="checkbox">
            <label>
                <input checked type="checkbox" value="">
                <span class="skin"></span>
                Disabled Checkbox
            </label>
        </div>

        <div class="radio">
            <label>
                <input type="radio" value="">
                <span class="skin"></span>
                Disabled Radio
            </label>
        </div>

        <button class="btn btn-primary" type="submit">Submit</button>
    </fieldset>
</form>

Read Only States

Text Input (Read Only)

Textarea (Read Only)

Plunger pot, extra siphon latte, as americano aromatic roast cultivar cup cup frappuccino. To go, strong, half and half foam single origin, cultivar affogato black grounds shop ut plunger pot. Con panna aroma, pumpkin spice to go, wings, aromatic single shot, aged single shot to go extraction java. Percolator americano at cultivar grinder est java percolator plunger pot shop con panna.

<div class="form-group">
    <label>Text Input (Read Only)</label>
    <input class="form-control" placeholder="Placeholder" readonly type="text">
</div>

<div class="form-group">
    <label>Textarea (Read Only)</label>
    <textarea class="form-control" placeholder="Placeholder" readonly></textarea>
</div>

Form Element Sizes

Small text input

Default text input

Large text input

<div class="form-group">
    <label>Small text input</label>
    <input class="form-control input-sm" placeholder="Placeholder" type="text">
</div>

<div class="form-group">
    <label>Default text input</label>
    <input class="form-control" placeholder="Placeholder" type="text">
</div>

<div class="form-group">
    <label>Large text input</label>
    <input class="form-control input-lg" placeholder="Placeholder" type="text">
</div>

Lexicon v1.0.32