Label

Components

Label

Label is a themed version of the native label element that can be paired with other form components like Input, Textarea, Radio and Checkbox.

Form inputs must always have a label. Ideally, this label is visual, but in all cases, the label must be accessible to technology like screen readers. The easiest way to label an input field is by using this component and providing an htmlFor property that matches the id of the input field being labelled.

If the label absolutely cannot be visible, you can visually hide it or use an aria-label on the input field itself.

This is a label for a form element

import { Label } from '@sproutsocial/racine'

<Label htmlFor='matching-id'>
  This is a label for a form element
</Label>

<Label htmlFor='matching-id'>
  This is a label for a form element
</Label>

Properties

Name	Type	Default	Description	Required?
`htmlFor`	`string`		ID of the associated form element
`children`	`React.Node`

Recipes

Label with icon

This is a label for a form element

<Label>
  <Icon name='globe' mr={300} />
  This is a label for a form element
</Label>

<Label>
  <Icon name='globe' mr={300} />
  This is a label for a form element
</Label>