Background
Description
Describes the information requested by a given form field
User stories
As a form user, I want clear information about every form field.
As a screen reader user, I want a semantic label attached to every form field.
History
OOUI has LabelWidget (which inherits LabelElement). We may want to create a standalone Label component, consider a composable that will take in label text and output a semantic label to be used within input/control components, or both.
Known use cases
All form fields should use a label, either as part of a Field component or as a composable inside the input/control component.
Existing implementations
These artifacts are listed for historical context. The figma spec, linked below, is the source of truth for the new component.
Wikimedia community:
- Design style guide: -
- OOUI: LabelWidget
- Vue:
- WiKit (Sass mixin)
External libraries:
- Vuetify: labels are part of form input/control components
- Buefy: part of the Field component
Codex implementation
Component task owners
- Designer: @bmartinezcalvo
- Developer: @AnneT
Open questions
- Will label be used as text in other components? - Label component will be used on top of Form items while label item will be used as text on Checkboxes, Radios and ToggleSwitches
- Will label be customized to Bold and Regular? - Yes, Label as bold by default, with ability to Regular in certain cases
- Will be the description part of the label? - Yes, it needs to be so we can include it in the <legend>, which is needed for screen readers
Design spec
Anatomy
- Label section will include the following elements:
- Start icon (it will be optional)
- Label (it will be always displayed)
- "Optional" indicator when the form field is not required (it will be optional)
- Tooltip. It will be created with a small 24px icon-only quiet button (it will be optional)
- Description will be include bellow the label to use when the user needs to provide extra info about the label
Style
- Label style will be Bold as default and it could be customized to Regular for specific cases
Interaction
The following states will be implemented:
- Default
- Disabled
Documentation
Configurable demo will include the following:
- startIcon: the user will be able to type in a text input the icon they want to display
- optional field
- tooltip
- description: the user will be able to type in a text input the text they want to display in the demo
- disabled: the user will be able to select the disabled state with a toggle switch
- Reading direction: LTR/RTL will be selected with radios
Other standalone demos could include:
- A label component displaying the description with a link within the text
- A label component where the text style is Regular, explaining that the Bold style will be the base style but we will use Regular if needed for specific cases
- The use of the label component combining it within a Form Field component
Acceptance criteria
Minimum viable product
This task covers the minimum viable product (MVP) version of this component. MVP includes basic layout, default states, and most important functionality.
MVP scope
- Label section will include the following elements:
- Start icon (it will be optional)
- Label (it will be always displayed)
- "Optional" indicator when the form field is not required (it will be optional)
- Description will be include bellow the label to use when the user needs to provide extra info about the label
Design
- Design the Figma spec sheet and add a link to it in this task
- Update the component in the Figma library. This step will be done by a DST member.
Code
- Implement the component in Codex
