Label

Name an input, mark it as required, and connect the label to its field.

<sy-label>Installation guide Basic usage

Live preview

Interact with the component to see results here.

LabelRequired marker positionText alignmentWidth

Required markerDisabled

View code

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-label
    value="Email"
    requiredposition="right"
    valueposition="left"
    width="100px"
    required
    for="field"
  ></sy-label>
  <sy-input
    placeholder="name@example.com"
    required
    id="field"
    aria-label="Email"
  ></sy-input>
</div>

Usage guide

Keep an always-visible explanation of the expected value beside the field.

Connect to an input
Set for to the input element's id. Clicking the Label focuses the connected input.
Arrange to fit the form
Use valuePosition and width for placement and width, and requiredPosition for the required marker.

Examples

Connect a field

Click the label to focus its associated input.

View code

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-label value="Project name" for="project"></sy-label>
  <sy-input placeholder="New project" id="project"></sy-input>
</div>

Mark required fields

Configure both the label indicator and the input's validation.

View code

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-label
    value="Name"
    required
    requiredposition="left"
    for="name"
  ></sy-label>
  <sy-input required id="name"></sy-input>
</div>

Feature examples

Choose a feature from 6 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.