Elixir Docs | Input

Input

Inputs allow users to enter information and they can be of different types - text, number, password, email, submit, etc.

Elixir offers the following types of input components - default input, input with validations for success, error, warning, default textbox, and inline inputs. Default Inputs, Inline Inputs, Inputs with success validations, Inputs with warning validations, Inputs with error validations, and Textbox.

Default Input

To generate a default input, use the base class input along with the supporting class input-default.

Name

Copy the code below to use a default input component.

<div class="input-group input-default m-1">
    <label class="text-label flex--col" for="input-name">
        Name
        <input type="text" id="input-name" class="input-text px-0-75 py-0-5" placeholder="Enter your name...">
    </label>
    <span class="text-message mt-0-5"></span>
</div>

Inline Input

To generate an inline input, use the base class input-group along with the supporting class input-inline.

Name

Copy the code below to use an inline input component.

<div class="input-group input-default m-1 input-inline">
    <label class="text-label flex--row flex--align-center px-0-75 py-0-5" for="input-inline-name">
        Name
        <input type="text" id="input-inline-name" class="input-text" placeholder="Enter your name...">
    </label>
    <span class="text-message mt-0-5"></span>
</div>

Input with Success Validation

To generate an input that converys a success validation, use the base class input-group along with the supporting class input-success.

Password Strong Password

Copy the code below to use an input with successfull validation.

<div class="input-group input-success m-1">
    <label class="text-label flex--col" for="input-strong-password">
        Password
        <input type="password" id="input-strong-password" class="input-text px-0-75 py-0-5" placeholder="Enter your password...">
    </label>
    <span class="text-message mt-0-5">Strong Password</span>
</div>

Input with Warning Validation

To generate an input that conveys a warning validation, use the base class input-group class along with the supporting class input-warning.

Password Weak Password

copy the code below to use an input with warning validation.

<div class="input-group input-warning m-1">
    <label class="text-label flex--col" for="input-weak-password">
        Password
        <input type="password" id="input-weak-password" class="input-text px-0-75 py-0-5" placeholder="Enter your password...">
    </label>
    <span class="text-message mt-0-5">Weak Password</span>
</div>

Input with Error Validation

To generate an input that conveys an error validation, use the base class input-group class along with the supporting class input-error.

Email Incorrect Email

Copy the code below to use an input with error validation.

<div class="input-group input-error m-1">
    <label class="text-label flex--col" for="input-error-email">
        Email
        <input type="email" id="input-error-email" class="input-text px-0-75 py-0-5" placeholder="Enter your email...">
    </label>
    <span class="text-message mt-0-5">Incorrect Email</span>
</div>

Default textbox

This input component allows users to enter multiple lines of text.

To generate a textbox use the base class input-group along with the supporting classes textbox-default and textbox-group.

Comments

Copy the code below to use a default textbox.

<div class="input-group textbox-default textbox-group m-1">
    <label for="input-comments" class="text-label">Comments</label>
    <textarea id="input-coments" class="input-textbox p-0-75" rows="10" cols="30" placeholder="Enter your comments..."></textarea>
    <span class="text-message"></span>
</div>