Forms

Theme provides several form control styles, layout options, and custom components for creating a wide variety of forms.

Form controls

Example:

Actosketch Bootstrap Form component

HTML:

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleSelect1">Example select</label>
        <select class="form-control" id="exampleSelect1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="form-group">
        <label for="exampleSelect2">Example multiple select</label>
        <select multiple class="form-control" id="exampleSelect2">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="form-group">
        <label for="exampleTextarea">Example textarea</label>
        <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
        <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
    </div>
    <fieldset class="form-group">
        <legend>Radio buttons</legend>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                Option one is this and that&mdash;be sure to include why it's great
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
                Option two can be something else and selecting it will deselect option one
            </label>
        </div>
        <div class="form-check disabled">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
                Option three is disabled
            </label>
        </div>
    </fieldset>
    <div class="form-check">
        <label class="form-check-label">
            <input type="checkbox" class="form-check-input">
            Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Inline forms

Example:

Actosketch Bootstrap Form component

HTML:

<form class="form-inline">
  <label class="sr-only" for="inlineFormInput">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroup">Username</label>
  <div class="input-group mb-2 mr-sm-2 mb-sm-0">
    <div class="input-group-addon">@</div>
    <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2 mb-sm-0">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>

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

Textual inputs

Examples of .form-control applied to each textual HTML5 <input> type.

Example:

Actosketch Bootstrap Form component

HTML:

<div class="form-group actosketch-grid-layout-row">
  <label for="example-text-input" class="actosketch-grid-layout-col-1-4 col-form-label">Text</label>
  <div class="actosketch-grid-layout-col-3-4">
    <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
  </div>
</div>
<div class="form-group actosketch-grid-layout-row">
  <label for="example-search-input" class="actosketch-grid-layout-col-1-4 col-form-label">Search</label>
  <div class="actosketch-grid-layout-col-3-4">
    <input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
  </div>
</div>
<div class="form-group actosketch-grid-layout-row">
  <label for="example-email-input" class="actosketch-grid-layout-col-1-4 col-form-label">Email</label>
  <div class="actosketch-grid-layout-col-3-4">
    <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
  </div>
</div>
<div class="form-group actosketch-grid-layout-row">
  <label for="example-url-input" class="actosketch-grid-layout-col-1-4 col-form-label">URL</label>
  <div class="actosketch-grid-layout-col-3-4">
    <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
  </div>
</div>
<div class="form-group actosketch-grid-layout-row">
  <label for="example-tel-input" class="actosketch-grid-layout-col-1-4 col-form-label">Telephone</label>
  <div class="actosketch-grid-layout-col-3-4">
    <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
  </div>
</div>
<div class="form-group actosketch-grid-layout-row">
  <label for="example-password-input" class="actosketch-grid-layout-col-1-4 col-form-label">Password</label>
  <div class="actosketch-grid-layout-col-3-4">
    <input class="form-control" type="password" value="hunter2" id="example-password-input">
  </div>
</div>
<div class="form-group actosketch-grid-layout-row">
  <label for="example-number-input" class="actosketch-grid-layout-col-1-4 col-form-label">Number</label>
  <div class="actosketch-grid-layout-col-3-4">
    <input class="form-control" type="number" value="42" id="example-number-input">
  </div>
</div>
<div class="form-group actosketch-grid-layout-row">
  <label for="example-datetime-local-input" class="actosketch-grid-layout-col-1-4 col-form-label">Date and time</label>
  <div class="actosketch-grid-layout-col-3-4">
    <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
  </div>
</div>
<div class="form-group actosketch-grid-layout-row">
  <label for="example-date-input" class="actosketch-grid-layout-col-1-4 col-form-label">Date</label>
  <div class="actosketch-grid-layout-col-3-4">
    <input class="form-control" type="date" value="2011-08-19" id="example-date-input">
  </div>
</div>
<div class="form-group actosketch-grid-layout-row">
  <label for="example-month-input" class="actosketch-grid-layout-col-1-4 col-form-label">Month</label>
  <div class="actosketch-grid-layout-col-3-4">
    <input class="form-control" type="month" value="2011-08" id="example-month-input">
  </div>
</div>
<div class="form-group actosketch-grid-layout-row">
  <label for="example-week-input" class="actosketch-grid-layout-col-1-4 col-form-label">Week</label>
  <div class="actosketch-grid-layout-col-3-4">
    <input class="form-control" type="week" value="2011-W33" id="example-week-input">
  </div>
</div>
<div class="form-group actosketch-grid-layout-row">
  <label for="example-time-input" class="actosketch-grid-layout-col-1-4 col-form-label">Time</label>
  <div class="actosketch-grid-layout-col-3-4">
    <input class="form-control" type="time" value="13:45:00" id="example-time-input">
  </div>
</div>
<div class="form-group actosketch-grid-layout-row">
  <label for="example-color-input" class="actosketch-grid-layout-col-1-4 col-form-label">Color</label>
  <div class="actosketch-grid-layout-col-3-4">
    <input class="form-control" type="color" value="#563d7c" id="example-color-input">
  </div>
</div>

Disabled states

Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.

Example:

Actosketch Bootstrap Form component

HTML:

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Form validation

Add a particular state for specific types of feedback: - Danger for a situation when there’s a blocking or required field. A user must fill in this field properly to submit the form; - Warning for input values that are in progress, like password strength, or soft validation before a user attempts to submit a form; - Success for situations when you have per-field validation throughout a form and want to encourage a user through the rest of the fields.

Example:

Actosketch Bootstrap Form component

HTML:

<div class="form-group has-success">
  <label class="form-control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control form-control-success" id="inputSuccess1">
  <div class="form-control-feedback">Success! You've done it.</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-group has-warning">
  <label class="form-control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control form-control-warning" id="inputWarning1">
  <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-group has-danger">
  <label class="form-control-label" for="inputDanger1">Input with danger</label>
  <input type="text" class="form-control form-control-danger" id="inputDanger1">
  <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>