# Forms and Inputs Various form and input styles. ```html ``` ## 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.
Plugin Doc
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
``` ## Select ```html
``` ## Checkboxes ```html
``` ## Radio Groups ```html
``` ## Kitchen Sink Display and functionality of these elements may vary greatly between devices and browsers. ```html
``` ## Groups Input groups support a subset of form elements and button styles. These pair well with [Presets](/docs/design/presets). ```html --- ---
https://
``` | 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. |