@dodlab/design-system

컴포넌트 카탈로그

Text Field

기본 · 입력됨 · 오류 · 비활성

이름

이름을 입력하세요

이메일

hong@example.com

이메일

hong@example

올바른 이메일 형식이 아닙니다.

이름

비활성 필드

Text Area

문의 내용

Select · AutoComplete

우선순위

우선순위 선택

기술 스택

기술 스택 검색

Radio Group

결제 수단

카드 결제 계좌 이체 휴대폰 결제

Checkbox

선택 · 부분선택 · 비활성 · 크기

약관 동의

전체 동의 일부만 동의됨 선택 불가

크기

small medium large

Switch

알림

알림 받기

비활성

마케팅 수신

Segmented Control

전체 진행중 완료 보류

Button

variant · size

variant

Contained Outlined Text

size

xsmall small normal large

Date Picker

기간 선택 · 정밀도 선택

이용 기간

연도.월.일. ~ 연도.월.일.

생년월일

YYYY-MM-DD

File Upload

프로필 사진

진행률

Tooltip · Truncated Text

도움말

자세한 내용은 도움말 문서를 참고하세요. 아래쪽 배치

상품명 아주 긴 상품명이 들어가면 말줄임 처리됩니다 아주 긴 상품명이 들어가면 말줄임 처리됩니다

Dialog

버튼을 눌러 확인

확인 대화상자

삭제하기

스크롤 대화상자

이용약관 보기

Form Preview

여러 타입을 한 폼에서

문의 유형 Q1

단일 선택

문의 유형 선택

담당자명 Q2

자유 입력

이름을 입력하세요

연락처 Q3

숫자만 입력

010-1234-5678

요청 내용 Q4

장문 입력

긴급 처리 요청 Q5

예 / 아니오

희망 처리일 Q6

날짜 + 시간

YYYY-MM-DD HH:mm

비고 Q7

자유 입력 · 사유 선택 가능

선택 입력 사항입니다

사유

제출

Color

상태에만 배정된 채도

Typography

h4 — Lorem ipsum dolor sit amet

h6 — Lorem ipsum dolor sit amet

subtitle2 — Lorem ipsum dolor sit amet

body1 — Lorem ipsum dolor sit amet

body2 — Lorem ipsum dolor sit amet

caption — Lorem ipsum dolor sit amet

OVERLINE — Lorem ipsum dolor sit amet