Label webcomponent - DÁP Szolgáltatások

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.

Pure css example:

  Label text


  Description content
<dap-ds-label
  label="Label Text"
  description="Description content">
</dap-ds-label>

<br/>
<br/>

Pure css example:
<label
  class="dds-label dds-label--sm dds-label--required">
  Label text
</label>
<span
  class="dds-typography dds-typography-description dds-typography-size--sm dds-block">
  Description content
</span>
<dap-ds-label
  label="Label Text"
  description="Description content">
</dap-ds-label>

<br/>
<br/>

Pure css example:
<label
  class="dds-label dds-label--sm dds-label--required">
  Label text
</label>
<span
  class="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>
<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.

Pure css example:


  
    Label text 
    *
  


  Description content

<dap-ds-stack>
<dap-ds-label
  label="Label text"
  description="Description content"
  required>
</dap-ds-label>

Pure css example:
<div>
<span class="dds-label-container">
  <label
    class="dds-label dds-label--sm">
    Label text 
    <span class="dds-label__required-indicator"
      aria-label="optional"
    >*</span>
  </label>
</span>
<span
  class="dds-typography dds-typography-description dds-typography-size--sm dds-block">
  Description content
</span>
</div>
</dap-ds-stack>
<dap-ds-stack>
<dap-ds-label
  label="Label text"
  description="Description content"
  required>
</dap-ds-label>

Pure css example:
<div>
<span class="dds-label-container">
  <label
    class="dds-label dds-label--sm">
    Label text 
    <span class="dds-label__required-indicator"
      aria-label="optional"
    >*</span>
  </label>
</span>
<span
  class="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.

Pure css example:


  
    Label text 
    (Optional)
  


  Description content



  
    Label text 
    (Hey! This is not necessary!)
  


  Description content

<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 class="dds-label-container">
  <label
    class="dds-label dds-label--sm">
    Label text 
    <span class="dds-label__optional-indicator"
      aria-label="optional"
    >(Optional)</span>
  </label>
</span>
<span
  class="dds-typography dds-typography-description dds-typography-size--sm dds-block">
  Description content
</span>
</div>

<div>
<span class="dds-label-container">
  <label
    class="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
  class="dds-typography dds-typography-description dds-typography-size--sm dds-block">
  Description content
</span>
</div>
</dap-ds-stack>
<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 class="dds-label-container">
  <label
    class="dds-label dds-label--sm">
    Label text 
    <span class="dds-label__optional-indicator"
      aria-label="optional"
    >(Optional)</span>
  </label>
</span>
<span
  class="dds-typography dds-typography-description dds-typography-size--sm dds-block">
  Description content
</span>
</div>

<div>
<span class="dds-label-container">
  <label
    class="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
  class="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.

Pure css example:

  
    
      Subtle label 
    
  
  
    Subtle description content
  
<dap-ds-stack>
<dap-ds-label
  label="Subtle label"
  description="Subtle description content"
  subtle>
</dap-ds-label>

Pure css example:
<div>
  <span class="dds-label-container">
    <label
      class="dds-label dds-label--sm dds-label--subtle">
      Subtle label 
    </label>
  </span>
  <span
    class="dds-typography dds-typography-description dds-typography-size--sm dds-block">
    Subtle description content
  </span>
</div>
</dap-ds-stack>
<dap-ds-stack>
<dap-ds-label
  label="Subtle label"
  description="Subtle description content"
  subtle>
</dap-ds-label>

Pure css example:
<div>
  <span class="dds-label-container">
    <label
      class="dds-label dds-label--sm dds-label--subtle">
      Subtle label 
    </label>
  </span>
  <span
    class="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.

Pure css example:

  
    
      Disabled label 
    
  
  
    Disabled description content
  
<dap-ds-stack>
<dap-ds-label
  label="Disabled label"
  description="Disabled description content"
  disabled>
</dap-ds-label>

Pure css example:
<div>
  <span class="dds-label-container">
    <label
      class="dds-label dds-label--sm dds-label--disabled">
      Disabled label 
    </label>
  </span>
  <span
    class="dds-typography dds-typography-description dds-typography-size--sm dds-block">
    Disabled description content
  </span>
</div>
</dap-ds-stack>
<dap-ds-stack>
<dap-ds-label
  label="Disabled label"
  description="Disabled description content"
  disabled>
</dap-ds-label>

Pure css example:
<div>
  <span class="dds-label-container">
    <label
      class="dds-label dds-label--sm dds-label--disabled">
      Disabled label 
    </label>
  </span>
  <span
    class="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.

  
  
  
  
  
  


    
      
        Label xs
      
    
    
      Description xs
    
  

    
      
        Label xs
      
    
    
      Disabled sm
    
  

    
      
        Label xs
      
    
    
      Description lg
    
  

<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 class="dds-label-container">
      <label
        class="dds-label dds-label--xs">
        Label xs
      </label>
    </span>
    <span
      class="dds-typography dds-typography-description dds-typography-size--xs dds-block">
      Description xs
    </span>
  </div>
      <div>
    <span class="dds-label-container">
      <label
        class="dds-label dds-label--sm">
        Label xs
      </label>
    </span>
    <span
      class="dds-typography dds-typography-description dds-typography-size--sm dds-block">
      Disabled sm
    </span>
  </div>
  <div>
    <span class="dds-label-container">
      <label
        class="dds-label dds-label--lg">
        Label xs
      </label>
    </span>
    <span
      class="dds-typography dds-typography-description dds-typography-size--lg dds-block">
      Description lg
    </span>
  </div>
</dap-ds-stack>
</dap-ds-stack>
<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 class="dds-label-container">
      <label
        class="dds-label dds-label--xs">
        Label xs
      </label>
    </span>
    <span
      class="dds-typography dds-typography-description dds-typography-size--xs dds-block">
      Description xs
    </span>
  </div>
      <div>
    <span class="dds-label-container">
      <label
        class="dds-label dds-label--sm">
        Label xs
      </label>
    </span>
    <span
      class="dds-typography dds-typography-description dds-typography-size--sm dds-block">
      Disabled sm
    </span>
  </div>
  <div>
    <span class="dds-label-container">
      <label
        class="dds-label dds-label--lg">
        Label xs
      </label>
    </span>
    <span
      class="dds-typography dds-typography-description dds-typography-size--lg dds-block">
      Description lg
    </span>
  </div>
</dap-ds-stack>
</dap-ds-stack>

Importing

Per-component import (Recommended)

Import the component by its own subpath. This registers <dap-ds-label> (and the components it renders internally) and lets your bundler include only what you use:

import 'dap-design-system/components/label'

Need a reference to the class (e.g. to register it manually or extend it)? The same subpath default-exports it:

import DapDSLabel from 'dap-design-system/components/label'

import 'dap-design-system'

Importing React

import { DapDSLabelReact } from 'dap-design-system/react'

Attributes

Property	Type	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
`requiredLabel`	`string`	Indicator of required text (default: '*')
`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.

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 Name	Description
`--dds-label-background`	The background color of the label container. (default: var(--dds-background-neutral-subtle)).
`--dds-label-border-color`	The border color of the label container. (default: var(--dds-border-neutral-subtle)).
`--dds-label-border-width`	The border width of the label container. (default: var(--dds-border-width-base)).
`--dds-label-border-radius`	The border radius of the label container. (default: var(--dds-radius-base)).
`--dds-label-padding`	The padding of the label container. (default: var(--dds-spacing-400)).
`--dds-label-disabled-background`	The background color of the label container when disabled. (default: var(--dds-background-neutral-disabled-inverted)).
`--dds-label-checked-border-color`	The border color of the label container when checked. (default: 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.

<dap-ds-label

label="Label Text"

description="Description content">

</dap-ds-label>

<br/>

Pure css example:

<label

class="dds-label dds-label--sm dds-label--required">

Label text

</label>

<span

class="dds-typography dds-typography-description dds-typography-size--sm dds-block">

Description content

</span>

<dap-ds-stack>

<dap-ds-label

label="Label text"

description="Description content"

required>

</dap-ds-label>

Pure css example:

<div>

<label

class="dds-label dds-label--sm">

Label text

<span class="dds-label__required-indicator"

aria-label="optional"

>*</span>

</label>

</span>

<span

class="dds-typography dds-typography-description dds-typography-size--sm dds-block">

Description content

</span>

</div>

</dap-ds-stack>

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

<label

class="dds-label dds-label--sm">

Label text

<span class="dds-label__optional-indicator"

aria-label="optional"

>(Optional)</span>

</label>

</span>

<span

class="dds-typography dds-typography-description dds-typography-size--sm dds-block">

Description content

</span>

</div>

<div>

<label

class="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

class="dds-typography dds-typography-description dds-typography-size--sm dds-block">

Description content

</span>

</div>

</dap-ds-stack>

<dap-ds-stack>

<dap-ds-label

label="Subtle label"

description="Subtle description content"

subtle>

</dap-ds-label>

Pure css example:

<div>

<label

class="dds-label dds-label--sm dds-label--subtle">

Subtle label

</label>

</span>

<span

class="dds-typography dds-typography-description dds-typography-size--sm dds-block">

Subtle description content

</span>

</div>

</dap-ds-stack>

<dap-ds-stack>

<dap-ds-label

label="Disabled label"

description="Disabled description content"

disabled>

</dap-ds-label>

Pure css example:

<div>

<label

class="dds-label dds-label--sm dds-label--disabled">

Disabled label

</label>

</span>

<span

class="dds-typography dds-typography-description dds-typography-size--sm dds-block">

Disabled description content

</span>

</div>

</dap-ds-stack>

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

<label

class="dds-label dds-label--xs">

Label xs

</label>

</span>

<span

class="dds-typography dds-typography-description dds-typography-size--xs dds-block">

Description xs

</span>

</div>

<div>

<label

class="dds-label dds-label--sm">

Label xs

</label>

</span>

<span

class="dds-typography dds-typography-description dds-typography-size--sm dds-block">

Disabled sm

</span>

</div>

<div>

<label

class="dds-label dds-label--lg">

Label xs

</label>

</span>

<span

class="dds-typography dds-typography-description dds-typography-size--lg dds-block">

Description lg

</span>

</div>

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

requiredLabel

string

Indicator of required text (default: '*')

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.

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.

/* 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 */ }

Property Name

Description

--dds-label-background

The background color of the label container. (default: var(--dds-background-neutral-subtle)).

--dds-label-border-color

The border color of the label container. (default: var(--dds-border-neutral-subtle)).

--dds-label-border-width

The border width of the label container. (default: var(--dds-border-width-base)).

--dds-label-border-radius

The border radius of the label container. (default: var(--dds-radius-base)).

--dds-label-padding

The padding of the label container. (default: var(--dds-spacing-400)).

--dds-label-disabled-background

The background color of the label container when disabled. (default: var(--dds-background-neutral-disabled-inverted)).

--dds-label-checked-border-color

The border color of the label container when checked. (default: var(--dds-background-brand-base-inverted)).