Input
Input (입력 필드)
텍스트 필드에서 사용자 입력을 받는 컴포넌트예요. 크기·변형·도우미 텍스트·오류 텍스트 등 다양한 구성으로 폼 입력을 손쉽게 만들어요.
출처: 문서
본문
사용법 (Usage)
import { Input } from "@chakra-ui/react"
<Input />
예제 (Examples)
변형 (Variants)
variant prop을 사용해 입력 필드의 시각적 스타일을 변경해요.
크기 (Sizes)
size prop을 사용해 입력 필드의 크기를 변경해요.
도우미 텍스트 (Helper Text)
Field 컴포넌트와 함께 입력 필드를 조합해 도우미 텍스트를 추가해요.
오류 텍스트 (Error Text)
Field 컴포넌트와 함께 입력 필드를 조합해 오류 텍스트를 추가해요.
필드 (Field)
Field 컴포넌트와 함께 입력 필드를 조합해 라벨, 도우미 텍스트, 오류 텍스트를 추가해요.
Hook Form
react-hook-form과 함께 입력 필드를 연동하는 예시예요.
요소 (Element)
InputGroup 컴포넌트에서 startElement와 endElement를 사용해 입력 필드의 시작과 끝에 요소를 추가해요.
시작 아이콘 (Start Icon)
시작 텍스트 (Start Text)
시작과 끝 텍스트 (Start and End Text)
Kbd
선택 (Select)
추가 요소 (Addon)
InputAddon과 Group 컴포넌트를 사용해 입력 필드에 추가 요소를 붙여요.
시작 추가 요소 (Start Addon)
끝 추가 요소 (End Addon)
시작과 끝 추가 요소 (Start and End Addon)
비활성화 (Disabled)
disabled prop을 사용해 입력 필드를 비활성화해요.
버튼 (Button)
Group 컴포넌트를 사용해 입력 필드에 버튼을 붙여요.
포커스·오류 색상 (Focus and Error Color)
--focus-color와 --error-color CSS 커스텀 프로퍼티를 사용해 입력 필드가 포커스되거나 오류 상태일 때의 색상을 변경해요.
플레이스홀더 스타일 (Placeholder Style)
_placeholder prop을 사용해 플레이스홀더 텍스트에 스타일을 적용해요.
플로팅 라벨 (Floating Label)
입력 필드에 플로팅 라벨을 구성하는 예시예요.
마스크 (Mask)
use-mask-input 라이브러리를 사용해 입력 필드 형태를 마스킹하는 예시예요.
문자 수 카운터 (Character Counter)
입력 필드에 문자 수 카운터를 추가하는 예시예요.
카드 번호 (Card Number)
react-payment-inputs를 사용해 카드 번호 입력을 만드는 예시예요.
카드 번호, 만료일, CVC에 대한 전체 카드 입력을 만들 수 있어요.
지우기 버튼 (Clear Button)
Input과 CloseButton 컴포넌트를 조합해 지우기 버튼을 만들어요. 검색 입력 필드를 만들 때 유용해요.
Props
Input 컴포넌트의 Input 부분에 대한 prop 테이블 (대화형 문서 참고).