# 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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sh20raj.gitbook.io/skylinecss/forms.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.