# Forms and Inputs Various form and input styles. ```astro

Account

Account Details
Shipping Address
Notes
``` ## Requirements Skeleton relies on the official [Tailwind Forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin to normalize form styling, also known as a reset. This plugin is required if you wish to use any form utility classes provided on this page.
View on Github
Install the `@tailwindcss/forms` package, then implement the `@plugin` directive in your global stylesheet. ```sh npm install -D @tailwindcss/forms ``` ```css @import 'tailwindcss'; @plugin '@tailwindcss/forms'; /* ...Skeleton config here... */ ``` ## Browser Support The quality and appearance of native and semantic HTML form elements can vary between both operating systems and browser vendors. Skeleton does its best to adhere to progressive enhancement best practices. However, we advise you validate support for each element per your target audience. *** ## Fieldsets Use the optional `.fieldset` and `.legend` classes to group related form controls with an accessible title. ```astro
Account Details
``` ## Labels Use `.label` and `.label-text` for styling the visible label text. ```astro
``` ## Input Apply the `.input` class to all standard box-shaped [input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types). ```astro
``` ## Select Apply the `.select` class to ` ``` ## Textarea Apply the `.textarea` class to ` ``` ## Checkboxes Use `type="checkbox"` for inputs that allow one or more independent options to be toggled on or off. ```astro
``` ## Radio Groups Use `type="radio"` to present a set of mutually exclusive options where only one can be selected. ```astro
``` ## Range Use `type="range"` to allow selection of a numeric value from a continuous or stepped range via a slider. ```astro
``` ## Progress Use `` to indicate the completion status of a task, such as a file upload or loading operation. ```astro
``` ## Meter Use `` to represent a scalar value within a known range, such as disk usage, battery level, or a score. ```astro
``` ## Color Use `type="color"` to provide a native color picker for selecting a single color value. ```astro
``` *** ## Field Sizes Use `field-{size}` paired with: `xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl` ```astro
xs sm base lg xl
``` ## Field Groups Apply `field-group` to create a grouping of related box-shaped fields or buttons. This acts as a [grid](https://tailwindcss.com/docs/display#grid) container, allowing for column configuration. Make use of [Presets](/docs/\[framework]/tailwind-utilities/presets) to style label columns. ```astro --- import { CheckIcon, CircleDollarSignIcon, SearchIcon } from 'lucide-react'; ---
```