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>
</>
Tooltip

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>
Required

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>
Optional

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>
Subtle

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>
Disabled

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>
Size

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>
Importing 
import { DapDSLabel } from 'dap-design-system'
Importing React 
import { DapDSLabelReact } from 'dap-design-system/react'
Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSLabel } from 'dap-design-system/components'
Attributes
PropertyTypeDefaultDescription
labelstringThe label text
descriptionstringThe description of the label
tooltipstringThe 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.
optionalbooleanIf the label is optional. Default value is false.
optionalLabelstringLabel of optional text
subtlebooleanText weight of label. If true the label is subtle. Default value is false.
disabledbooleanThe disabled state of the label. Default is false.
requiredbooleanThe required state of the label. Default is false.
Slots

No slots available.

Events

No custom events available.

CSS Parts
Part NameDescription
baseThe main label container.
labelTha main label container. dap-ds-form-label element.
label-baseThe label text.
label-requiredThe required indicator of the label.
label-optionalThe optional indicator of the label.
tooltipThe tooltip of the label. dap-ds-tooltip element.
descriptionThe description of the label.
How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-label::part(base) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-label::part(base),
.my-custom-dap-ds-label::part(label) {
  /* Shared styles */
}

Example usage:

<dap-ds-label class="my-custom-dap-ds-label">
  Label
</dap-ds-label>

.my-custom-dap-ds-label::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.

 CSS Custom Properties
Property NameDescription
--dds-label-backgroundThe background color of the label container. Default is `var(--dds-background-neutral-subtle)`.
--dds-label-border-colorThe border color of the label container. Default is `var(--dds-border-neutral-subtle)`.
--dds-label-border-widthThe border width of the label container. Default is `var(--dds-border-width-base)`.
--dds-label-border-radiusThe border radius of the label container. Default is `var(--dds-radius-base)`.
--dds-label-paddingThe padding of the label container. Default is `var(--dds-spacing-400)`.
--dds-label-disabled-backgroundThe background color of the label container when disabled. Default is `var(--dds-background-neutral-disabled-inverted)`.
--dds-label-checked-border-colorThe border color of the label container when checked. Default is `var(--dds-background-brand-base-inverted)`.
How to Use CSS Custom Properties

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-label
  style="--dds-label-background: value; --dds-label-border-color: value;">
  Label
</dap-ds-label>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-label {
  --dds-label-background: value;
  --dds-label-border-color: value;
  --dds-label-border-width: value;
}

<dap-ds-label class="my-custom-dap-ds-label">
  Label
</dap-ds-label>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-label {
  --dds-label-background: value;
  --dds-label-border-color: value;
}

CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.