Label
A label is a container for labels, description and tooltip. It has a generic structure and styling for form fields.
Examples
As a basic example, you can use label and description both as string values.
<>
<dap-ds-label
label="Label Text"
description="Description content">
</dap-ds-label>
<br/>
<br/>
Pure css example:
<label
className="dds-label dds-label--sm dds-label--required">
Label text
</label>
<span
className="dds-typography dds-typography-description dds-typography-size--sm dds-block">
Description content
</span>
</>
To set up a tooltip, you can use tooltip and tooltipPlacement. The tooltipPlacement has a default value of bottom
<dap-ds-label
label="Label Text"
description="Description content"
tooltip="Custom tooltip text"
></dap-ds-label>
To make the label look required, you can use the required parameter.
<dap-ds-stack>
<dap-ds-label
label="Label text"
description="Description content"
required>
</dap-ds-label>
Pure css example:
<div>
<span className="dds-label-container">
<label
className="dds-label dds-label--sm">
Label text
<span class="dds-label__required-indicator"
aria-label="optional"
>*</span>
</label>
</span>
<span
className="dds-typography dds-typography-description dds-typography-size--sm dds-block">
Description content
</span>
</div>
</dap-ds-stack>
Label can have an extra optional label content. By default it is the text "Optional". To change this text, you can use the optionalLabel parameter.
<dap-ds-stack>
<dap-ds-label
label="Label Text"
description="Description content"
optional>
</dap-ds-label>
<dap-ds-label
label="Label Text"
description="Description content"
optional
optionalLabel="(Hey! This is not necessary!)">
</dap-ds-label>
Pure css example:
<div>
<span className="dds-label-container">
<label
className="dds-label dds-label--sm">
Label text
<span class="dds-label__optional-indicator"
aria-label="optional"
>(Optional)</span>
</label>
</span>
<span
className="dds-typography dds-typography-description dds-typography-size--sm dds-block">
Description content
</span>
</div>
<div>
<span className="dds-label-container">
<label
className="dds-label dds-label--sm">
Label text
<span class="dds-label__optional-indicator"
aria-label="optional"
>(Hey! This is not necessary!)</span>
</label>
</span>
<span
className="dds-typography dds-typography-description dds-typography-size--sm dds-block">
Description content
</span>
</div>
</dap-ds-stack>
You can use the subtle parameter to make the label a bit more subtle.
<dap-ds-stack>
<dap-ds-label
label="Subtle label"
description="Subtle description content"
subtle>
</dap-ds-label>
Pure css example:
<div>
<span className="dds-label-container">
<label
className="dds-label dds-label--sm dds-label--subtle">
Subtle label
</label>
</span>
<span
className="dds-typography dds-typography-description dds-typography-size--sm dds-block">
Subtle description content
</span>
</div>
</dap-ds-stack>
To make the label look disabled, you can use the disabled parameter.
<dap-ds-stack>
<dap-ds-label
label="Disabled label"
description="Disabled description content"
disabled>
</dap-ds-label>
Pure css example:
<div>
<span className="dds-label-container">
<label
className="dds-label dds-label--sm dds-label--disabled">
Disabled label
</label>
</span>
<span
className="dds-typography dds-typography-description dds-typography-size--sm dds-block">
Disabled description content
</span>
</div>
</dap-ds-stack>
You can choose different sizes for the label. Default is sm.
<dap-ds-stack direction="row" spacing="1200">
<dap-ds-stack>
<dap-ds-label
label="Label xs"
description="Description xs"
size="xs">
</dap-ds-label>
<dap-ds-label
label="Label sm"
description="Description sm"
size="sm">
</dap-ds-label>
<dap-ds-label
label="Label lg"
description="Description lg"
size="lg">
</dap-ds-label>
</dap-ds-stack>
<dap-ds-stack>
<div>
<span className="dds-label-container">
<label
className="dds-label dds-label--xs">
Label xs
</label>
</span>
<span
className="dds-typography dds-typography-description dds-typography-size--xs dds-block">
Description xs
</span>
</div>
<div>
<span className="dds-label-container">
<label
className="dds-label dds-label--sm">
Label xs
</label>
</span>
<span
className="dds-typography dds-typography-description dds-typography-size--sm dds-block">
Disabled sm
</span>
</div>
<div>
<span className="dds-label-container">
<label
className="dds-label dds-label--lg">
Label xs
</label>
</span>
<span
className="dds-typography dds-typography-description dds-typography-size--lg dds-block">
Description lg
</span>
</div>
</dap-ds-stack>
</dap-ds-stack>
| Property | Type | Default | Description |
|---|
label | string | | The label text |
description | string | | The description of the label |
tooltip | string | | The tooltip text |
size | 'xs', 'sm' , 'lg' | | The size of the input. Default is sm. |
tooltipPlacement | 'top', 'right' , 'bottom' , 'left' | | The tooltip placement of the label. |
optional | boolean | | If the label is optional. Default value is false. |
optionalLabel | string | | Label of optional text |
subtle | boolean | | Text weight of label. If true the label is subtle. Default value is false. |
disabled | boolean | | The disabled state of the label. Default is false. |
required | boolean | | The required state of the label. Default is false. |
Slots
No slots available.
Events
No custom events available.
CSS Parts
| Part Name | Description |
|---|
base | The main label container. |
label | Tha main label container. dap-ds-form-label element. |
label-base | The label text. |
label-required | The required indicator of the label. |
label-optional | The optional indicator of the label. |
tooltip | The tooltip of the label. dap-ds-tooltip element. |
description | The description of the label. |
CSS Custom Properties
| Property Name | Description |
|---|
--dds-label-background | The background color of the label container. Default is `var(--dds-background-neutral-subtle)`. |
--dds-label-border-color | The border color of the label container. Default is `var(--dds-border-neutral-subtle)`. |
--dds-label-border-width | The border width of the label container. Default is `var(--dds-border-width-base)`. |
--dds-label-border-radius | The border radius of the label container. Default is `var(--dds-radius-base)`. |
--dds-label-padding | The padding of the label container. Default is `var(--dds-spacing-400)`. |
--dds-label-disabled-background | The background color of the label container when disabled. Default is `var(--dds-background-neutral-disabled-inverted)`. |
--dds-label-checked-border-color | The border color of the label container when checked. Default is `var(--dds-background-brand-base-inverted)`. |
