> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/containers/form.md).

# Form

There are three wrappers for form elements: `Form`, `FormGroup` and `FormFields`. It is not necessary to wrap all your forms into Form container, but these components give you a possibility to quickly and easily create a form layout. 

```tsx
import { Form, FormGroup, FormField, TextInput, 
    PasswordInput, FormGroupVariant } from 'altrone-ui';

return <Form>
    <FormGroup variant={FormGroupVariant.row}>
        <FormField label="Your username">
            <TextInput placeholder="Username" />
        </FormField>
        <FormField label="Your password">
            <PasswordInput placeholder="Password" />
        </FormField>
    </FormGroup>
</Form>
```

## Form

`Form` container is the main container for form elements. All form elements must be inside this container.&#x20;

`Form` container adds `<form>` element to DOM tree.&#x20;

### Properties <mark style="color:orange;">(extends</mark> <mark style="color:orange;"></mark><mark style="color:orange;">`HTMLFormElement`</mark><mark style="color:orange;">)</mark>

| Property                                              | Type      | Description      |
| ----------------------------------------------------- | --------- | ---------------- |
| **`children`**<mark style="color:red;">**`*`**</mark> | ReactNode | Child elements   |
| **`className`**                                       | string    | Custom CSS class |

***

## FormGroup

`FormGroup` is used to position child `FormField` element in a specific layout. The layout can be specified using enum [`FormGroupVariant`](#formgroupvariant).

### <mark style="color:blue;">FormGroupVariant</mark>

```typescript
enum FormGroupVariant {
  default = 'default',
  linear = 'linear',
  row = 'row'
}
```

### Properties

| Property                                              | Type                                    | Description                                                                                                                                          |
| ----------------------------------------------------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`children`**<mark style="color:red;">**`*`**</mark> | `ReactNode`                             | Child elements                                                                                                                                       |
| **`variant`**                                         | [`FormGroupVariant`](#formgroupvariant) | Layout of the group. Default value is default                                                                                                        |
| **`weights`**                                         | `number[]`                              | <p>The width of the child elements. Numbers set flex-grow property for every child element. <br><br>Works only with <code>linear</code> variant.</p> |
| **`className`**                                       | `string`                                | Custom CSS class                                                                                                                                     |

***

## FormField

FormField wraps form control into a special container. You can also set a label and hintText of the control.&#x20;

### Properties

| Property                                              | Type      | Description                                  |
| ----------------------------------------------------- | --------- | -------------------------------------------- |
| **`children`**<mark style="color:red;">**`*`**</mark> | ReactNode | Inner control                                |
| **`label`**                                           | string    | Label text                                   |
| **`required`**                                        | boolean   | Adds red asterisk to the label               |
| **`hintText`**                                        | string    | Adds question mark with tooltip to the label |

## History

* **`Altrone 2.0`**: added `hintText` prop for [`FormField`](#formfield)
* **`Altrone 1.0`**: initial release