Label

Styled form <label> element.

<Label htmlFor='email'>Email</Label>
<Input
  id='email'
  name='email'
/>

<Label fontSize={1} nowrap>
  <Radio />
  {' '}
  This label will not wrap
</Label>

Accessibility

HTML <label> elements are always required with form elements. Use the htmlFor attribute to link a label with its related form control's id.

Using placeholders in place of a label is not acceptable. See How-to: Use Placeholder Attributes for more.

Hidden Prop

To hide a form label but still allow screen readers to announce the element, use the hidden prop.

This can still cause accessiblity issues if there isn't an alternative, visible label for people to read visually. The placeholder attribute is not a replacement for a label.

See the following for more info:

• How-to: Use Placeholder Attributes
• How-to: Hide Content

<Label hidden htmlFor='email'>Email</Label>
<Input
  id='email'
  name='email'
/>

Props