텍스트·숫자·날짜 등 단일 행 입력을 위한 Input 컴포넌트입니다. form_field · input_field · input_group · input_split · input_otp를 조합해 레이블, 힌트, 애드온, 분할·인증 입력을 구성합니다.
레이블과 힌트 텍스트가 포함된 폼 필드입니다.
2~20자 이내로 입력해 주세요.
form_field 래퍼 없이 input_field로 레이블과 input을 묶을 수 있습니다. 접근 가능한 이름은 반드시 지정합니다. 보이는 레이블이 있으면 label.form_field-label + for를, 아이콘만 있는 검색창·툴바 등에는 label.input_group으로 input을 감싸고 input_group-label_hidden으로 이름을 제공합니다.
아이콘만 있는 툴바 검색은 label.input_group으로 input을 감싸고, 화면에 보이지 않는 input_group-label_hidden으로 접근 가능한 이름을 지정합니다.
HTML input type에 따라 브라우저 기본 UI가 적용됩니다. class="input"은 모든 타입에 공통으로 사용합니다.
0~100 사이 정수
결제·본인인증·사업자 정보 등 도메인별 입력 패턴입니다. 예시는 부모 너비 100%를 기본으로 하며, 필요 시 form_field_fit · input_fit으로 최대 너비를 제한할 수 있습니다. input_split · input_otp · input_group · input_row를 조합해 구성합니다.
뒤 8자리는 마스킹 처리할 수 있습니다.
카드 뒷면 3자리
문자 메시지로 받은 6자리 번호를 입력하세요.
인증번호가 오지 않으면 재요청해 주세요.
뒷자리는 보안을 위해 마스킹합니다.
천 단위 구분은 표시용으로 별도 포맷팅합니다.
input_sm · input(기본) · input_lg로 padding·font-size를 조절합니다. 너비와는 별개이며 input_fit 등과 자유롭게 조합할 수 있습니다.
크기와 독립적으로 너비를 제어합니다. 기본은 부모 100%, input_fit · input_field_fit · form_field_fit · form_fit으로 --input-max-width(320px)까지 제한합니다.
input_group으로 앞뒤에 텍스트·아이콘 애드온을 붙일 수 있습니다.
required 속성과 form_field-required로 필수 입력을 표시합니다.
업무용 이메일을 입력해 주세요.
disabled · readonly · is-error · is-success로 입력 상태를 표현합니다. 오류·성공 메시지는 색상만으로 전달하지 않고 텍스트와 aria 속성을 함께 사용합니다.
disabled 속성으로 편집을 막습니다.
올바른 이메일 형식이 아닙니다.
clearable prop으로 값이 있을 때 우측에 지우기 버튼을 표시합니다. readonly · disabled 상태에서는 버튼이 나타나지 않습니다.
유효성 검사 후 성공·실패 상태를 조합한 로그인 폼입니다. aria-invalid · aria-describedby · role="alert" · role="status"로 스크린 리더에 피드백을 전달합니다.
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
model-value | string | — | v-model 바인딩 값 |
type | string | text | input type 속성 |
size | 'sm' | 'md' | 'lg' | md | input_sm · input_lg |
placeholder | string | — | placeholder 속성 |
disabled | boolean | false | 비활성 |
error | boolean | false | 오류 상태 (is-error, aria-invalid) |
block | boolean | false | 부모 너비 100% (input_block) |
clearable | boolean | false | 값이 있을 때 우측 지우기 버튼 (input_clearable). readonly · disabled면 미표시 |
선언되지 않은 HTML 속성·이벤트(id, autocomplete, @blur 등)는 루트 input 요소에 그대로 전달됩니다.
| 슬롯 | 설명 |
|---|---|
prefix | 앞쪽 애드온 (input_group-addon) |
suffix | 뒤쪽 애드온 |
| 이벤트 | 설명 |
|---|---|
update:modelValue | 입력 값 변경 시 (v-model) |
paste | 붙여넣기 이벤트. data-input-split · data-input-otp 내부에서는 값을 각 칸에 분배합니다. |
keydown | 키 입력 이벤트. 분할 입력의 Backspace 이동과 OTP 좌우 방향키 이동을 지원합니다. |
Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
input | 텍스트 입력 루트 |
input_sm · input_lg · input_block | 크기·너비 |
input_masked | 마스킹 입력값 표시 시 자동 적용 (type="password" + 값 있음) |
input_group · input_group-addon | 애드온 묶음 |
input_clearable · input_clear | 지우기 버튼 래퍼·버튼 (clearable prop) |
is-error · is-disabled | 상태 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
| 토큰 | 기본값 | 설명 |
|---|---|---|
--input-max-width | 320px | 데모·폼 최대 너비 |
--input-clear-size · --input-clear-offset | — | 클리어 버튼 |
--input-font-masked · --input-masked-letter-spacing | — | 마스킹 입력 |