Form

To use only Fire UI form feature, copy and paste this stylesheet link into your head element to load Fire UI Form CSS.

<link rel="stylesheet" href="https://unpkg.com/@fire-ui/fire-ui@0.1.1/src/feature/Form/form.css">

Form Control

Give your input and textarea custom styles, styling and more

Example

<input type="text" class="form-control" placeholder="Input text using form-control class">
<textarea class="form-control" placeholder="Textarea using form-control class"></textarea>

Form Label

Give your input a styled input

Example

Username:

<p class="form-label">Username:</p>
<input type="text" class="form-control">

Form Group

Grouping your inputs into form-group

Example

Email address:

Username:

Password:

<div class="box theme-reverse">
    <div class="form-group">
        <p class="form-label">Email address:</p>
        <input type="email" class="form-control">
    </div>
    <div class="form-group">
        <p class="form-label">Username:</p>
        <input type="text" class="form-control">
    </div>
    <div class="form-group">
        <p class="form-label">Password:</p>
        <input type="password" class="form-control">
    </div>
    <div class="form-group">
        <input type="submit" class="btn form-control theme-adjust">
    </div>
</div>

Textarea auto adjust

Auto adjust your textarea height according to user's input by using textarea-auto-adjust class.

Example

<textarea class="textarea-auto-adjust form-control"></textarea>

Form Grid

You can combine form with Fire UI Grid System too!

Example

<div class="box theme-reverse">
    <div class="row">
        <div class="col-ex-7"><input type="text" class="form-control" placeholder="First name"></div>
        <div class="col-ex-5"><input type="text" class="form-control" placeholder="Last name"></div>
    </div>
</div>