> ## Documentation Index
> Fetch the complete documentation index at: https://tonic.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Forms

To add nice styles to a form, simply add the `.ui-form` class. You'll now get nice styling out of the box for Text Fields, Selects, Datepickers, Text areas and more.

## Add Styling to a form

```html theme={null}
<form class="ui-form">
  ... 
</form>
```

## Removing Styling on Individual Form Elements

```html theme={null}
<form class="ui-form">
  <input type="text" class="no-style" />
</form>
```

## Input Groups

```html theme={null}
<div class="ui-input-group">
  <input id="first_name" type="text" placeholder="First Name">
  <input id="middle_name" type="text" placeholder="Middle Name">
  <input id="last_name" type="text" placeholder="Last Name">
</div>
```

## Floating Labels

```html theme={null}
<div class="ui-floating-input mt-2">
  <input type="text" id="floating_example" placeholder=" ">
  <label for="floating_example">First Name</label>
</div>
```

## Variables

```css theme={null}
--ui-input-border-width: 1px;
--ui-shared-element-border-radius: 10px;
--ui-shared-element-height-lg: 40px; 
--ui-shared-element-height: 36px;
--ui-shared-element-height-sm: 24px;
--ui-shared-element-padding-lg: 0 16px;
--ui-shared-element-padding: 0 12px;
--ui-shared-element-padding-sm: 0 8px;
--ui-shared-element-border-color: var(--ui-color-gray-300);
--ui-shared-element-box-shadow: var(--ui-shadow);
```