Labels are used to create text labels for items in an interface. Most commonly used inside other form components.
<duet-label for="identifier">Label text</duet-label>
<duet-label size="small" for="identifier">Small label text</duet-label>
| || ||ID of the component that the label is labelling.|| || |
| || ||Controls the margin of the component.|| || |
| || ||Controls the size of the label.|| || |
| || ||Theme of the label.|| || |
This section includes guidelines for designers and developers about the usage of this component in different contexts.
When to use #
- To represent a caption for an item in a user interface.
- To label button, input, keygen, meter, output, progress, select, or textarea html elements.
When not to use #
- As a heading. Use small size from heading component instead.
- When you need to display interactive elements, such as links. Use paragraph component with link instead.
- To label something else except button, input, keygen, meter, output, progress, select, or textarea html elements.
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.
- Label component uses a basic HTML
<label>element behind the scenes and offers similar functionality and API for its users.
forproperty to set the ID of the component that the label is labelling.
Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:
Using CLI ToolsTutorials
Creating Custom PatternsTutorials
Server Side RenderingTutorials
Usage With Markdown
If you experience any issues while using a component, please head over to the Support page for more guidelines and help.