## Input Elements

### Inline Input

Default Inline: I am Name and I live in Place
Straight Inline: I am Name and I live in Place
Rounded Inline: I am Name and I live in Place
Underline Inline: I am Name and I live in Place
Filled Inline: I am Name and I live in Place
HTML

    <div class="">
                <label>Default Inline:</label>
                <span>I am</span>
                <label for="input_text_name" class="label label--hidden">
                    Name
                </label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--inline"
                    placeholder="Name"
                />
                <span>and I live in</span>
                <label for="input_text_place" class="label label--hidden">
                    Place
                </label>
                <input
                    type="text"
                    id="input_text_place"
                    class="input input--base--inline"
                    placeholder="Place"
                />
            </div>
            <div class="">
                <label>Straight Inline:</label>
                <span>I am</span>
                <label for="input_text_name" class="label label--hidden">
                    Name
                </label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--inline input--style--straight"
                    placeholder="Name"
                />
                <span>and I live in</span>
                <label for="input_text_place" class="label label--hidden">
                    Place
                </label>
                <input
                    type="text"
                    id="input_text_place"
                    class="input input--base--inline input--style--straight"
                    placeholder="Place"
                />
            </div>
            <div class="">
                <label>Rounded Inline:</label>
                <span>I am</span>
                <label for="input_text_name" class="label label--hidden">
                    Name
                </label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--inline input--style--rounded"
                    placeholder="Name"
                />
                <span>and I live in</span>
                <label for="input_text_place" class="label label--hidden">
                    Place
                </label>
                <input
                    type="text"
                    id="input_text_place"
                    class="input input--base--inline input--style--rounded"
                    placeholder="Place"
                />
            </div>
            <div class="">
                <label>Underline Inline:</label>
                <span>I am</span>
                <label for="input_text_name" class="label label--hidden">
                    Name
                </label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--inline input--style--underline"
                    placeholder="Name"
                />
                <span>and I live in</span>
                <label for="input_text_place" class="label label--hidden">
                    Place
                </label>
                <input
                    type="text"
                    id="input_text_place"
                    class="input input--base--inline input--style--underline"
                    placeholder="Place"
                />
            </div>
            <div class="">
                <label>Filled Inline:</label>
                <span>I am</span>
                <label for="input_text_name" class="label label--hidden">
                    Name
                </label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--inline input--style--filled"
                    placeholder="Name"
                />
                <span>and I live in</span>
                <label for="input_text_place" class="label label--hidden">
                    Place
                </label>
                <input
                    type="text"
                    id="input_text_place"
                    class="input input--base--inline input--style--filled"
                    placeholder="Place"
                />
            </div>

### Form Input

Default form: Name
Straight form: Name
Rounded form: Name
Underline form: Name
Filled form: Name
HTML

    <div class="">
                <label>Default form:</label>
                <label for="input_text_name" class="label">Name</label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--form"
                    placeholder="Name"
                />
            </div>
            <div class="">
                <label>Straight form:</label>
                <label for="input_text_name" class="label">Name</label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--form input--style--straight"
                    placeholder="Name"
                />
            </div>
            <div class="">
                <label>Rounded form:</label>
                <label for="input_text_name" class="label">Name</label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--form input--style--rounded"
                    placeholder="Name"
                />
            </div>
            <div class="">
                <label>Underline form:</label>
                <label for="input_text_name" class="label">Name</label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--form input--style--underline"
                    placeholder="Name"
                />
            </div>
            <div class="">
                <label>Filled form:</label>
                <label for="input_text_name" class="label">Name</label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--form input--style--filled"
                    placeholder="Name"
                />
            </div>

### Input States

Default
Focus
Disabled
Success
Warning
Error
Info
Focus-visible (keyboard tab)
HTML

    <!-- Default -->
            <div class="field-group">
                <label for="default" class="label">Default</label>
                <input
                    id="default"
                    type="text"
                    class="input"
                    placeholder="Default"
                />
            </div>

            <!-- Focus -->
            <div class="field-group">
                <label for="focus" class="label">Focus</label>
                <input
                    id="focus"
                    type="text"
                    class="input"
                    placeholder="Focus me"
                />
            </div>

            <!-- Disabled -->
            <div class="field-group">
                <label for="disabled" class="label">Disabled</label>
                <input
                    id="disabled"
                    type="text"
                    class="input"
                    disabled
                    placeholder="Can't type"
                />
            </div>

            <!-- Success -->
            <div class="field-group">
                <label for="success" class="label">Success</label>
                <input
                    id="success"
                    type="text"
                    class="input is_success"
                    placeholder="Valid input"
                />
            </div>

            <!-- Warning -->
            <div class="field-group">
                <label for="warning" class="label">Warning</label>
                <input
                    id="warning"
                    type="text"
                    class="input is_warning"
                    placeholder="Might need attention"
                />
            </div>

            <!-- Error -->
            <div class="field-group">
                <label for="error" class="label">Error</label>
                <input
                    id="error"
                    type="text"
                    class="input is_error"
                    placeholder="Incorrect input"
                />
            </div>

            <!-- Info -->
            <div class="field-group">
                <label for="info" class="label">Info</label>
                <input
                    id="info"
                    type="text"
                    class="input is_info"
                    placeholder="Helpful context"
                />
            </div>

            <!-- Focus-visible test -->
            <div class="field-group">
                <label for="focus-visible" class="label">
                    Focus-visible (keyboard tab)
                </label>
                <input
                    id="focus-visible"
                    type="text"
                    class="input"
                    placeholder="Tab into me"
                />
            </div>

### Form Input

Default form: Name
Straight form: Name
Rounded form: Name
Underline form: Name
Filled form: Name
HTML

    <div class="">
                <label>Default form:</label>
                <label for="input_text_name" class="label">Name</label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--form"
                    placeholder="Name"
                />
            </div>
            <div class="">
                <label>Straight form:</label>
                <label for="input_text_name" class="label">Name</label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--form input--style--straight"
                    placeholder="Name"
                />
            </div>
            <div class="">
                <label>Rounded form:</label>
                <label for="input_text_name" class="label">Name</label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--form input--style--rounded"
                    placeholder="Name"
                />
            </div>
            <div class="">
                <label>Underline form:</label>
                <label for="input_text_name" class="label">Name</label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--form input--style--underline"
                    placeholder="Name"
                />
            </div>
            <div class="">
                <label>Filled form:</label>
                <label for="input_text_name" class="label">Name</label>
                <input
                    type="text"
                    id="input_text_name"
                    class="input input--base--form input--style--filled"
                    placeholder="Name"
                />
            </div>

### Default Form Column ()

Name Email Bio
HTML

    <form class="form--col">
                <label for="name">Name</label>
                <input
                    type="text"
                    id="name"
                    class="input"
                    placeholder="Your full name"
                />
                <label for="email">Email</label>
                <input
                    type="email"
                    id="email"
                    class="input"
                    placeholder="you@example.com"
                />
                <label for="bio">Bio</label>
                <textarea
                    id="bio"
                    class="input"
                    rows="4"
                    placeholder="Tell us something..."
                ></textarea>
                <button type="submit" class="button button--solid">Submit</button>
                <button type="reset" class="button button--solid">Reset</button>
            </form>

### Default Form Column (Form Groups)

Name
Email
Bio
HTML

    <form class="form--col">
                <div class="form__field">
                    <label for="name">Name</label>
                    <input
                        type="text"
                        id="name"
                        class="input"
                        placeholder="Your full name"
                    />
                </div>

                <div class="form__field">
                    <label for="email">Email</label>
                    <input
                        type="email"
                        id="email"
                        class="input"
                        placeholder="you@example.com"
                    />
                </div>

                <div class="form__field">
                    <label for="bio">Bio</label>
                    <textarea
                        id="bio"
                        class="input"
                        rows="4"
                        placeholder="Tell us something..."
                    ></textarea>
                </div>

                <div class="form__control">
                    <button type="submit" class="button button--solid">
                        Submit
                    </button>
                    <button type="reset" class="button button--solid">
                        Reset
                    </button>
                </div>
            </form>

### Default Form Row ()

Name Email Bio
HTML

    <form class="form--row">
                <label for="name">Name</label>
                <input
                    type="text"
                    id="name"
                    class="input"
                    placeholder="Your full name"
                />
                <label for="email">Email</label>
                <input
                    type="email"
                    id="email"
                    class="input"
                    placeholder="you@example.com"
                />
                <label for="bio">Bio</label>
                <textarea
                    id="bio"
                    class="input"
                    rows="4"
                    placeholder="Tell us something..."
                ></textarea>
                <button type="submit" class="button button--solid">Submit</button>
                <button type="reset" class="button button--solid">Reset</button>
            </form>

### Default Form Row (Form Groups)

Name
Email
Bio
HTML

    <form class="form--row">
                <div class="form__field">
                    <label for="name">Name</label>
                    <input
                        type="text"
                        id="name"
                        class="input"
                        placeholder="Your full name"
                    />
                </div>

                <div class="form__field">
                    <label for="email">Email</label>
                    <input
                        type="email"
                        id="email"
                        class="input"
                        placeholder="you@example.com"
                    />
                </div>

                <div class="form__field">
                    <label for="bio">Bio</label>
                    <textarea
                        id="bio"
                        class="input"
                        rows="4"
                        placeholder="Tell us something..."
                    ></textarea>
                </div>

                <div class="form__control">
                    <button type="submit" class="button button--solid">
                        Submit
                    </button>
                    <button type="reset" class="button button--solid">
                        Reset
                    </button>
                </div>
            </form>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!