Label

입력 항목의 이름과 필수 여부를 표시하고 입력란과 연결합니다.

<sy-label>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

레이블필수 표시 위치텍스트 정렬너비

필수 표시비활성화

코드 보기

HTML

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

사용 가이드

입력 필드가 어떤 값을 요구하는지 항상 보이게 설명합니다.

입력 필드와 연결
for에 입력 요소의 id를 지정하세요. Label을 누르면 연결한 입력 요소에 포커스가 이동합니다.
폼에 맞춰 배치
valuePosition과 width로 위치·너비를, requiredPosition으로 필수 표시 위치를 조정합니다.

예제

입력란 연결

레이블을 클릭해 연결된 입력란으로 이동합니다.

코드 보기

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-label value="프로젝트 이름" for="project"></sy-label>
  <sy-input placeholder="새 프로젝트" id="project"></sy-input>
</div>

필수 항목 표시

레이블의 표시와 입력의 실제 검증을 함께 설정합니다.

코드 보기

HTML

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

기능별 예제

6개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.