# Forms and Inputs
Various form and input styles.

```html
// Error loading file, please report this issue.
```

## Prerequisites

### Tailwind Forms

Skeleton relies on the official [Tailwind Forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin to normalize form styling. This plugin is required if you wish to make use of any utility classes provided on this page.

<figure class="card-filled-enhanced flex justify-center gap-4 p-8">
	<a class="btn preset-filled" href="https://github.com/tailwindlabs/tailwindcss-forms" target="_blank">
		Plugin Doc
	</a>
</figure>

Install the `@tailwindcss/forms` package.

```sh
npm install -D @tailwindcss/forms
```

Implement the plugin using the `@plugin` directive immediately following the `tailwindcss` import.

```css {2}
@import 'tailwindcss';
@plugin '@tailwindcss/forms';

/* ...Skeleton config here... */
```

### Browser Support

The display of native and semantic HTML form elements can vary between both operating systems and browsers. Skeleton does it's best to adhere to progressive enhancement best practices. However, we advise you validate support for each element per your target audience.

## Inputs

```html
// Error loading file, please report this issue.
```

## Select

```html
// Error loading file, please report this issue.
```

## Checkboxes

```html
// Error loading file, please report this issue.
```

## Radio Groups

```html
// Error loading file, please report this issue.
```

## Kitchen Sink

Display and functionality of these elements may vary greatly between devices and browsers.

```html
// Error loading file, please report this issue.
```

## Groups

Input groups support a subset of form elements and button styles. These pair well with [Presets](/docs/design/presets).

```html
// Error loading file, please report this issue.
```

| Class         | Usage                                   |
| ------------- | --------------------------------------- |
| `input-group` | Defines the parent input group set.     |
| `ig-cell`     | Defines a child cell for text or icons. |
| `ig-input`    | Defines a child input of `type="text"`. |
| `ig-select`   | Defines a child select element.         |
| `ig-btn`      | Defines a child button.                 |