Form Examples

This page showcases the form components available in the Casoon UI Library. These components are used to create interactive forms for user input.

Text Inputs

Text inputs allow users to enter text data.

Basic Text Input

<input type="text" class="input" placeholder="Enter text">

Input States

<input type="text" class="input" placeholder="Default input">
<input type="text" class="input success" value="Success input">
<input type="text" class="input error" value="Error input">
<input type="text" class="input" disabled value="Disabled input">

Input Sizes

<input type="text" class="input small" placeholder="Small input">
<input type="text" class="input" placeholder="Default input">
<input type="text" class="input large" placeholder="Large input">

Textarea

Textareas allow users to enter multi-line text.

<textarea class="textarea" rows="4" placeholder="Enter multiple lines of text"></textarea>

Select

Select components allow users to choose from a list of options.

Basic Select

<select class="select">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Option 1Option 2Option 3

Select States

<select class="select">
  <option>Default select</option>
</select>
<select class="select success">
  <option>Success select</option>
</select>
<select class="select error">
  <option>Error select</option>
</select>
<select class="select" disabled>
  <option>Disabled select</option>
</select>

Default select

Success select

Error select

Disabled select

Checkbox

Checkboxes allow users to select multiple options from a set.

Basic Checkbox

<label class="checkbox">
  <input type="checkbox">
  <span>Checkbox option</span>
</label>

Checkbox option

Checkbox States

<label class="checkbox">
  <input type="checkbox">
  <span>Unchecked</span>
</label>
<label class="checkbox">
  <input type="checkbox" checked>
  <span>Checked</span>
</label>
<label class="checkbox">
  <input type="checkbox" disabled>
  <span>Disabled unchecked</span>
</label>
<label class="checkbox">
  <input type="checkbox" checked disabled>
  <span>Disabled checked</span>
</label>

Unchecked

Checked

Disabled unchecked

Disabled checked

Radio Buttons

Radio buttons allow users to select one option from a set.

Basic Radio Buttons

<label class="radio">
  <input type="radio" name="radio-example">
  <span>Option 1</span>
</label>
<label class="radio">
  <input type="radio" name="radio-example">
  <span>Option 2</span>
</label>

Option 1

Option 2

Radio Button States

<label class="radio">
  <input type="radio" name="radio-states">
  <span>Unchecked</span>
</label>
<label class="radio">
  <input type="radio" name="radio-states" checked>
  <span>Checked</span>
</label>
<label class="radio">
  <input type="radio" name="radio-disabled" disabled>
  <span>Disabled unchecked</span>
</label>
<label class="radio">
  <input type="radio" name="radio-disabled" checked disabled>
  <span>Disabled checked</span>
</label>

Unchecked

Checked

Disabled unchecked

Disabled checked

Switch

Switches are used for toggling between two states.

<label class="switch">
  <input type="checkbox">
  <span class="switch-slider"></span>
  <span class="switch-label">Toggle switch</span>
</label>

Toggle switch

File Input

File inputs allow users to upload files.

<label class="file">
  <input type="file">
  <span class="file-label">Choose file</span>
</label>

Choose file

Input Group

Input groups combine related form controls.

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="input" placeholder="Username">
</div>

<div class="input-group">
  <input type="text" class="input" placeholder="Search">
  <button class="button primary">Search</button>
</div>

@

Form Layout

Example of a complete form layout.

<form class="form">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" class="input" placeholder="Enter your name">
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" class="input" placeholder="Enter your email">
    <small class="form-text">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" class="input" placeholder="Enter your password">
  </div>
  <div class="form-group">
    <label class="checkbox">
      <input type="checkbox">
      <span>Remember me</span>
    </label>
  </div>
  <div class="form-group">
    <button type="submit" class="button primary">Submit</button>
  </div>
</form>

Name

EmailWe'll never share your email with anyone else.

Password

Remember me