Input

Inputs are often required to get data from user. They can be text field, password, checkbox, rating. Ani-Design provides an .input-container class along with type classes as per the input. (e.g. .checkbox )

Text Inputs

Text inputs can be emails, passwords or a simple text field for a username. Use the data-error and data-success attributes with .input class for inputs

Password

Username

Copy
<div class="input-container" data-error="Invalid email">
    <label for="email"> Email </label>
    <input
        type="email"
        name="email"
        id="email"
        placeholder="email@xyz.com"
        class="input error"
    />
</div>

<!-- Input Password -->
<div class="input-container">
    <label for="password"> Password </label>
    <input type="password" name="password" id="password" class="input" />
</div>

<!-- Input Text -->
<div
    class="input-container"
    data-success="Username Available"
    data-error="Invalid email"
>
    <label for="username"> Username </label>
    <input
        type="text"
        name="username"
        id="username"
        class="input success"
        placeholder="sparky-spinner"
    />
</div>

Checkbox

Checkbox are needed for enabling optional setting or inside forms to provide the user with a variety of options to pick. Use the .checkbox class to get started. Various states of the checkbox are listed below.

Checked

Unchecked

Disabled

Checked & Disabled

Copy
<div class="input-container">
    <label for="chk-button1" class="checkbox">
        <input
            type="checkbox"
            name="checked"
            id="chk-button1"
            class="checkbox-input"
            checked
        />
        <div class="checkbox-icon"></div>
        Checked
    </label>
    <label for="chk-button2" class="checkbox">
        <input
            type="checkbox"
            name="checked"
            id="chk-button2"
            class="checkbox-input"
        />
        <div class="checkbox-icon"></div>
        Unchecked
    </label>
    <label for="chk-button3" class="checkbox disabled">
        <input
            type="checkbox"
            name="checked"
            id="chk-button3"
            class="checkbox-input"
            disabled
        />
        <div class="checkbox-icon"></div>
        Disabled
    </label>
    <label for="chk-button4" class="checkbox disabled">
        <input
            type="checkbox"
            name="checked"
            id="chk-button4"
            class="checkbox-input"
            checked
            disabled
        />
        <div class="checkbox-icon"></div>
        Checked & Disabled
    </label>
</div>

Radio Button

Radio buttons are used to make a single choice between multiple options. Use the .radio class to get started. Various states of the radio button are listed below.

Selected

Unselected

Disabled

Checked & Disabled

Copy
<div class="input-container">
    <label for="rd-button1" class="radio">
        <input
            type="radio"
            name="selected"
            id="rd-button1"
            class="radio-input"
            checked
        />
        <div class="radio-icon"></div>
        Selected
    </label>
    <label for="rd-button2" class="radio">
        <input
            type="radio"
            name="unselected"
            id="rd-button2"
            class="radio-input"
        />
        <div class="radio-icon"></div>
        Unselected
    </label>
    <label for="rd-button3" class="radio disabled">
        <input
            type="radio"
            name="disabled"
            id="rd-button3"
            class="radio-input"
            disabled
        />
        <div class="radio-icon"></div>
        Disabled
    </label>
    <label for="rd-button4" class="radio disabled">
        <input
            type="radio"
            name="selected-disabled"
            id="rd-button4"
            class="radio-input"
            checked
            disabled
        />
        <div class="radio-icon"></div>
        Checked & Disabled
    </label>
</div>

< Image List >