Field Label

Overview

Labels are used as a helper component for many input types, effective form labeling helps users understand what information to enter.

When to use

• Inputs should ALWAYS be accompanied by a Label describing what the user is expected to enter into the input field. e.g. ‘Date of Birth’.
• If the input is optional it should always be accompanied by the IsOptional helper.
• Do not use placeholder text in lieu of a Label.

When not to use

• If the input is required do not display the IsOptional helper.

Interactive demo

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Field Label

Label (optional)

Props Help

For each property in a component you can see:

• value-type
  that it supports
• The default
  value
• If the prop is
  required

Label

string

The text to appear in the label.

 

Screen Reader Label

string

The text to appear as additional label, for screen reader only.

 

Label Hidden

boolean

false

Only display the label for screen readers.

Toggle Prop

For

string

Required

Sets which input field the label is responsible for.

 

Required

boolean

false

If the field is optional.

Toggle Prop

Figma Library

You can find the component in our MedKit Figma library.