SearchInput
Input은 문자를 입력할 수 있는 컴포넌트입니다.Anatomy
인풋을 구성하는 요소를 설명합니다.
Import
import { SearchInput } from '@goorm-dev/vapor-components';Examples
Props
| name | description | default |
|---|---|---|
| value | string | |
| onKeyDown | func | |
| onFocus | func | |
| onChange | func | |
| onBlur | func | |
| onCancelClick | func | |
| placeholder | string | |
| size | xlsmmdlg | md |
| iconClassName | string | |
| inputClassName | string | |
| innerRef | ref | |
| className | string | |
| inputProps | reactstrap input props | |
| disabled | 입력 필드를 비활성화할지 여부를 나타내는 부울 값입니다. true로 설정하면 해당 입력 필드는 사용자가 상호작용할 수 없게 비활성화됩니다. 비활성화된 입력 필드는 스타일상 회색으로 표시되고, 클릭이나 키보드 입력 등의 이벤트를 받지 않습니다. boolean | |
| id | string | |
| invalid | 입력 필드가 유효하지 않은지 여부를 나타내는 부울 값입니다. true로 설정되면 유효하지 않은 상태로 스타일이 지정됩니다. (reactstrap props로 inputProps의 속성으로 추가되어 전달되어야 합니다.) boolean | |
| addon | boolean | |
| tag | 렌더링할 태그 또는 컴포넌트를 지정합니다. 기본적으로 input 태그가 사용되지만, 다른 태그나 커스텀 컴포넌트를 지정할 수 있습니다. (reactstrap props로 inputProps의 속성으로 추가되어 전달되어야 합니다.) elementType | |
| valid | 입력 필드가 유효한지 여부를 나타내는 부울 값입니다. true로 설정되면 유효한 상태로 스타일이 지정됩니다. (reactstrap props로 inputProps의 속성으로 추가되어 전달되어야 합니다.) boolean | |
| cssModule | CSSModule |