syidaxdesign system
홈 가격 내 정보
ComponentsInputs

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>

사용 가이드

#

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

  1. 입력 필드와 연결

    for에 입력 요소의 id를 지정하세요. Label을 누르면 연결한 입력 요소에 포커스가 이동합니다.

  2. 폼에 맞춰 배치

    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>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-label>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse레이블을 비활성 상태로 표시합니다. 연결된 입력에도 disabled를 지정하세요.
booleanfalse필수 표시를 추가합니다. 실제 검증은 입력 컴포넌트에 required를 지정하세요.
'left' | 'right''right'필수 표시를 레이블 왼쪽 또는 오른쪽에 배치합니다.
string''연결할 입력 요소의 id입니다.
string''현재 값 또는 항목의 식별 값입니다.
'left' | 'right' | 'center''left'레이블 영역 안의 텍스트 정렬입니다.
string''레이블 영역 너비입니다. CSS 길이 값을 사용합니다.

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.
Design SystemTab 이동 Enter 열기