FOUNDATIONS
입력 항목과 선택 도구를 연결하고 저장·검증 흐름을 구성합니다.
최대 폭·열 전환·스크롤·하단 CTA 배치와 레이어·Elevation 규칙을 함께 확인하세요.
라벨·설명·오류는 해당 입력 옆에 두고, 주요 저장 행동과 초기화를 구분합니다.
문서 플랫폼을 확인하는 중…
입력값을 유지하면서 저장 시 검증하고, 오류를 해당 필드에 연결합니다. 저장 성공 안내는 피드백 Provider가 담당합니다.
문서 플랫폼을 확인하는 중…
사용자가 많은 후보 중 하나의 자산이나 분류를 고르는 상황입니다.
| 컴포넌트 | 선택할 상황 | 책임과 차이 |
|---|---|---|
| Select | 미리 제공한 선택지 | 소비자가 options와 선택값을 연결합니다. searchable은 선택지 안의 검색입니다. 복수 선택도 지원합니다. |
| Combobox | 입력하면서 후보 선택 | 입력 중 검색어와 확정한 선택값을 구분합니다. options와 필터링·검색 통지를 소비자가 연결합니다. |
| SearchInput | 입력에 따른 비동기 후보 조회 | loadOptions에서 요청과 응답 변환을 수행합니다. 최소 글자 수·취소·늦은 응답 처리를 API에서 확인하세요. |
선택한 플랫폼의 실제 실행 예제입니다.
문서 플랫폼을 확인하는 중…
선택한 플랫폼의 실제 실행 예제입니다.
문서 플랫폼을 확인하는 중…
선택한 플랫폼의 실제 실행 예제입니다.
문서 플랫폼을 확인하는 중…
시·분·초, 소수 수량, 범위 값을 소비자 상태에 연결합니다. Chip의 삭제 요청에 따라 앱이 항목을 제거합니다. 수량은 확정된 값과 편집 중인 문자열을 구분합니다.
문서 플랫폼을 확인하는 중…
시각·수량·범위를 각각 상태에 연결하고 Chip의 삭제 요청으로 목록을 갱신합니다. 수량은 확정된 숫자 값을 사용합니다.
문서 플랫폼을 확인하는 중…
ButtonGroup은 하나의 기준값을 선택합니다. FilterGroup의 필터 선택, Tabs의 패널 전환과 구분하고 역할이 같은 공개 API를 재사용합니다.
문서 플랫폼을 확인하는 중…
ButtonGroup의 선택 요청을 하나의 기간 값에 연결합니다. 콘텐츠 패널 전환이나 복수 선택과 구분합니다.
문서 플랫폼을 확인하는 중…
프로젝트 이름을 바꾼 뒤 저장하거나 편집을 취소하는 화면입니다. 같은 문구와 입력을 두고 버튼의 위계·순서·묶음만 바꿉니다.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
문서 플랫폼을 확인하는 중…
팀이 함께 쓰는 프로젝트 설정입니다. 전후 화면에서 라벨과 도움말의 원문은 같습니다. 열 수만 줄여 입력과 설명의 연결을 읽기 쉽게 만듭니다.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
문서 플랫폼을 확인하는 중…
모든 팀원에게 적용할 변경 사항을 저장하는 화면입니다. 좁은 화면에서 긴 문장을 버튼 하나에 넣었을 때와 행동·설명을 나누었을 때를 비교합니다.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
문서 플랫폼을 확인하는 중…
알림을 받을 이메일을 저장하다 검증에 실패한 폼입니다. 같은 입력값과 저장 버튼을 유지하고 오류의 위치와 설명을 바꿉니다.
적용 조건 · 특정 필드의 값 때문에 저장에 실패했을 때 적용합니다. 실행 예제에서 값을 수정한 뒤 다시 검증할 수 있습니다.
주의 · 오류가 나도 입력값을 지우지 마세요. 통신·권한 오류는 필드 오류로 표현하지 않습니다. 예제의 형식 검사는 문서용입니다.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
문서 플랫폼을 확인하는 중…
권장 사례의 초기 오류 상태입니다. 재검증해도 입력값을 유지하고 FormGroup의 설명과 Input의 오류 표시를 함께 갱신합니다.
문서 플랫폼을 확인하는 중…