Hesoyam

Label

Accessible name for a form control. Title-cases value unless you opt out.

Default

value is the visible text. The control association is html-for, matching the native for attribute.


        

          1
          
          <Label value="This is a label" />

With input

with-input adds space under the label. Point html-for at the field id.


        

          1
          
          <Label
        

          2
          
            html-for="email-address"
        

          3
          
            value="Email Address"
        

          4
          
            with-input
        

          5
          
          />
        

          6
          
          <Input
        

          7
          
            id="email-address"
        

          8
          
            placeholder="name@example.com"
        

          9
          
          />

Bypass casing

value is Title Cased by default («email address» → «Email Address»). bypass-casing keeps the string you pass.


        

          1
          
          <Label
        

          2
          
            html-for="email-raw"
        

          3
          
            value="Email address"
        

          4
          
            bypass-casing
        

          5
          
            with-input
        

          6
          
          />
        

          7
          
          <Input
        

          8
          
            id="email-raw"
        

          9
          
            placeholder="name@example.com"
        

          10
          
          />

Slot

Default slot replaces value when you need markup inside the label.


        

          1
          
          <Label html-for="token" with-input>
        

          2
          
            Access token
        

          3
          
            <span class="text-[var(--ds-gray-900)]"> (optional)</span>
        

          4
          
          </Label>

On Input

Input already mounts Label when you pass label. Use this component when the label sits elsewhere or needs extra markup.


        

          1
          
          <Input label="Project Name" placeholder="my-awesome-project" />

Best practices

  • Every text field, select, and checkbox needs a visible Label. Placeholder is not a name.
  • Wire html-for to the control id. A matching id on the Label itself is only for aria-labelledby.
  • Keep copy to a short Title Case noun: Project Name, Domain, Environment Variable. Helper sentences live next to the field, not in the label.
  • Use bypass-casing for product names, env keys, and any string that is not English title case.
  • Prefer Input's label prop for a stacked field. Use Label directly when the caption is shared, sits beside the control, or contains extra markup.