---
name: Label
route: /components/common/forms/form-label
menu: Forms
edit: false
---

import { Playground, Props } from 'docz'
import FormLabel from './form-label'

# FormLabel
**SUBCATEGORY:** Forms

<hr />

## Label
### Description
A caption for a form input. Include a label with all form inputs (except buttons).
FormLabels are programmatically linked to the corresponding input, which increases the hit area and provides information to screenreaders.

<Playground>
  <FormLabel text="Label" />
</Playground>

<hr />

## Label (inverse)
### Description
A caption for a form input. Include a label with all form inputs (except buttons).
FormLabels are programmatically linked to the corresponding input, which increases the hit area and provides information to screenreaders.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <FormLabel inverse text="Label" />
</Playground>

<hr />

## Label + Tag
### Description
For indicating the status of a form input, for example if it is required or optional.

<Playground>
  <FormLabel text="Label" tag="Tag" />
</Playground>

<hr />

## Label + Tag (inverse)
### Description
For indicating the status of a form input, for example if it is required or optional.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <FormLabel inverse text="Label" tag="Tag" />
</Playground>

<hr />

## Properties
<Props of={FormLabel} />