Forms

SkyLineCSS provides utility classes to style HTML forms quickly and efficiently. These classes can be used to style form elements such as inputs, selects, checkboxes, and radio buttons.

Basic Form Input

To style a basic form input, use the .form-input class:

<input type="text" class="form-input" placeholder="Enter your name">

Form Sizes

You can adjust the size of form inputs using the following classes:

  • .input-sm: Small input size

  • .input-lg: Large input size

Example:

<input type="text" class="form-input input-sm" placeholder="Small Input">
<input type="text" class="form-input input-lg" placeholder="Large Input">

Form Colors

SkyLineCSS provides predefined color classes for form inputs:

  • .bg-gray-200: Background color

  • .text-blue-500: Text color

  • .border: Border color

Example:

<input type="text" class="form-input bg-gray-200 text-blue-500 border" placeholder="Custom Color Input">

Form Validation States

You can style form inputs based on validation states using the following classes:

  • .valid-input: Valid input

  • .invalid-input: Invalid input

Example:

<input type="text" class="form-input valid-input" placeholder="Valid Input">
<input type="text" class="form-input invalid-input" placeholder="Invalid Input">

Checkboxes and Radio Buttons

You can style checkboxes and radio buttons using the following classes:

  • .checkbox: Checkbox style

  • .radio: Radio button style

Example:

<input type="checkbox" id="checkbox1" class="checkbox">
<label for="checkbox1">Checkbox</label>

<input type="radio" id="radio1" name="radio" class="radio">
<label for="radio1">Radio Button</label>

Select Boxes

To style select boxes, use the .select class:

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

Form Buttons

You can style form buttons using the .btn class:

<button class="btn btn-primary">Submit</button>
<button class="btn btn-secondary">Cancel</button>

Form Groups

You can group form elements using the .form-group class:

<div class="form-group">
  <label for="name">Name:</label>
  <input type="text" id="name" class="form-input">
</div>

<div class="form-group">
  <label for="email">Email:</label>
  <input type="email" id="email" class="form-input">
</div>

Form Layouts

SkyLineCSS provides classes for form layouts:

  • .form-inline: Inline form layout

  • .form-horizontal: Horizontal form layout

Example:

<form class="form-inline">
  <input type="text" class="form-input" placeholder="Username">
  <button class="btn btn-primary">Submit</button>
</form>

<form class="form-horizontal">
  <div class="form-group">
    <label for="username" class="col-sm-2">Username:</label>
    <div class="col-sm-10">
      <input type="text" id="username" class="form-input">
    </div>
  </div>
  <div class="form-group">
    <label for="password" class="col-sm-2">Password:</label>
    <div class="col-sm-10">
      <input type="password" id="password" class="form-input">
    </div>
  </div>
</form>

These are some of the available form styling utilities in SkyLineCSS. You can combine these classes to create stylish and responsive forms for your projects.

PreviousFlexboxNextTables

Last updated