basecoat/docs/src/components/label.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Label	Renders an accessible label associated with controls.	label id Usage usage label id children Examples examples label id Disabled example-disabled label id RTL example-rtl

{% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %}

{% set code %} Accept terms and conditions {% endset %} {{ code_preview("label", code) }}

Usage

Add the label class to your <label> element. Labels' style may be affected by the presence of a disabled peer or child element.

{% set code %}Your email address{% endset %} {{ code_block(code) }}

Examples

Disabled

{% set code %}

Email

{% endset %} {{ code_preview("label-disabled", code) }}

RTL

Labels support right-to-left layouts through native text flow. Add dir="rtl" to the label or an ancestor.

{% set code %}

البريد الإلكتروني

{% endset %} {{ code_preview("label-rtl", code) }}