import { Meta, Story, Source } from "@storybook/addon-docs";

<Meta title="Documentation/Forms" />

# Forms

Examples and usage guidelines for form control styles, layout options, and custom components for
creating a wide variety of forms.

## Overview

Component Library forms should always be built using [Angular Reactive Forms][reactive]. Please read
[ADR-0001][adr-0001] for a background to this decision. In practice this means that forms should
always use the native `form` element and bind a `formGroup`.

Forms consists of one or multiple sections, and ends with one or multiple buttons.

### Form Field

A form field is the most common section in a form. It consists of a label, control and a optional
hint.

<Story id="component-library-form-field--default" />

<Source id="component-library-form-field--default" />

### Radio group

A radio group is a form field that consists of a main label and multiple radio groups. Each group
consists of a label and a radio input.

#### Block

<Story id="component-library-form-radio-button--block" />

<Source id="component-library-form-radio-button--block" />

#### Inline

<Story id="component-library-form-radio-button--inline" />

<Source id="component-library-form-radio-button--inline" />

## Full Example

<Story id="component-library-form--full-example" />

<Source id="component-library-form--full-example" />

[reactive]: https://angular.io/guide/reactive-forms
[adr-0001]: https://contributing.bitwarden.com/architecture/adr/reactive-forms