TextField
원본: projects/skill-lens/design/components/TextField/README.md
상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗
입력란: 기본, 포커스, 채움, 오류, 비활성
입력란입니다. 원본은 8판 .lbl과 .inp. 쉬는 상태는 canvas 면, 포커스되면 흰 면과 보라 테.
쓰는 곳
로그인, 회사 정보, 최대인원, 찾기.
구성(화면이 넘겨줄 것)
라벨, 플레이스홀더, 값, 도움말이나 오류 문구, 단위.
규칙
- 라벨은 항상 위, 13 회색 400. 플레이스홀더로 라벨을 대신하지 않습니다.
- 칸 높이 56, 둥글기 12, 안쪽 16, 바탕
canvas, 테 1.5 투명. - 라벨과 칸 사이 6(
space-label), 묶음 사이 20(space-group). 여러 칸은sl-form. - 찾기 칸(
sl-field--search): 높이 40, 앞에 찾기 아이콘. 긴 글(sl-field--area): 최소 88. - 오류는
danger테 + 아래 문구.
접근성
- 포커스 테를 지우지 않습니다. 오류 문구는
aria-describedby로 연결.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Input" height=420 subtitle="입력란: 기본, 포커스, 채움, 오류, 비활성" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface)}.g{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:var(--space-4)}</style>
<div class="sl g">
<label class="sl-field"><span class="sl-field__label">회사 이메일</span><span class="sl-field__box"><input class="sl-field__input" placeholder="name@company.com"></span></label>
<label class="sl-field is-focus"><span class="sl-field__label">회사 이름</span><span class="sl-field__box"><input class="sl-field__input" value="가온에"></span><span class="sl-field__help">공개 자료에서 자동으로 찾아요</span></label>
<label class="sl-field is-filled"><span class="sl-field__label">최대인원</span><span class="sl-field__box"><input class="sl-field__input" value="1,500"><span class="sl-field__suffix">명</span></span></label>
<label class="sl-field is-error"><span class="sl-field__label">비밀번호</span><span class="sl-field__box"><input class="sl-field__input" type="password" value="12345"></span><span class="sl-field__help">8자 이상, 영문과 숫자를 섞어 주세요</span></label>
<label class="sl-field is-disabled"><span class="sl-field__label">회사 이름(확인됨)</span><span class="sl-field__box"><input class="sl-field__input" value="가온에듀" disabled></span><span class="sl-field__help">회사 확인 단계에서 정한 값이라 여기서는 바꿀 수 없어요</span></label>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.