Input

Maeng Design의 Input 컴포넌트는 키보드 또는 마우스를 이용하여 사용자 입력을 받아 데이터를 제공하거나 변경할 수 있습니다.

Type

text, email, checkbox, radio, file, number, password, tel 8가지 type이 존재합니다.

CheckboxRadio

import React from 'react';
import { Input } from 'maeng-design';

const App = () => (
  <div>
    <Input type="text" placeholder="Enter text" />
    <Input type="email" placeholder="Example@maeng.design" />
    <Input type="checkbox">Checkbox</Input>
    <Input type="radio">Radio</Input>
    <Input type="file">파일 첨부</Input>
    <Input type="password" placeholder="Enter password" />
    <Input type="tel" placeholder="02-123-4567" />
  </div>
);

Size

텍스트 필드 타입 (text, email, number, password, tel)은 small, medium, large 3가지의 size가 존재합니다.

import React from 'react';
import { Input } from 'maeng-design';

const App = () => (
  <div>
    <Input type="text" placeholder="Enter small text" size="small" />
    <Input type="text" placeholder="Enter medium text" size="medium" />
    <Input type="text" placeholder="Enter large text" size="large" />
  </div>
);

Affix

텍스트 필드 타입 (text, email, number, password, tel)은 접두사 및 접미사를 설정할 수 있습니다.

$원

import React from 'react';
import { Input } from 'maeng-design';

const App = () => (
  <div>
    <Input type="text" placeholder="Affix text" prefix="$" suffix="원" />
  </div>
);

InputNumber

숫자를 입력하기 위해 사용됩니다. 마우스 hover시 우측에 증가 및 감소 버튼이 나타납니다.

import React from 'react';
import { Input } from 'maeng-design';

const { InputNumber } = Input;

const App = () => (
  <div>
    <Input type="number" placeholder={'Enter the number'} />
    <InputNumber value={100000} />
  </div>
);

Checkbox

여러 옵션에서 여러 값을 선택하기 위해 사용됩니다.

Checkbox 1Checkbox 2

import React from 'react';
import { Input } from 'maeng-design';

const { Checkbox } = Input;

const App = () => (
  <div>
    <Input type="checkbox">Checkbox 1</Input>
    <Checkbox checked>Checkbox 2</Checkbox>
  </div>
);

Radio

여러 옵션에서 하나의 값만 선택하는 경우 사용됩니다.
옵션을 묶기 위해서는 name을 동일하게 설정하거나 RadioGroup을 이용합니다.

Radio 1Radio 2Radio 3

import React from 'react';
import { Input } from 'maeng-design';

const { RadioGroup, Radio } = Input;

const App = () => (
  <div>
    <RadioGroup value={3}>
      <Radio value={1} >Radio 1</Radio>
      <Radio value={2} >Radio 2</Radio>
      <Radio value={3}>Radio 3</Radio>
    </RadioGroup>

    <Input name="radio" type="radio" value={1}>Radio 1</Input>
    <Input name="radio" type="radio" value={2}>Radio 2</Input>
    <Input name="radio" type="radio" value={3}>Radio 3</Input>
  </div>
);

Input API

Input 컴포넌트 공통 속성

Property	Description	Type	default
type	Input 컴포넌트의 타입을 지정할 수 있습니다.	text email checkbox radio file number password tel	text
color	Input 컴포넌트의 색상을 지정할 수 있습니다.	ColorName	blue6
disabled	입력 필드를 비활성화 시킬 수 있습니다.	boolean	false
value	입력 값	any	-
onChange	change 이벤트를 처리하는 핸들러 설정	(event \| value) => void	-

InputText API

텍스트 입력 필드 타입 (text, email, password, tel)의 경우

Property	Description	Type	default
placeholder	텍스트 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 안내문구를 표시합니다.	string	-
size	텍스트 입력 필드 타입 (text, email, password, tel)의 크기를 지정할 수 있습니다.	small medium large	medium
prefix	텍스트 입력 필드 타입 (text, email, password, tel)에 접두사를 지정할 수 있습니다.	ReactNode	-
suffix	텍스트 입력 필드 타입 (text, email, password, tel)에 접미사를 지정할 수 있습니다.	ReactNode	-
onChange	change 이벤트를 처리하는 핸들러 설정	(event) => void	-

InputNumber API

숫자 입력 필드 타입 (number)의 경우

Property	Description	Type	default
placeholder	숫자 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 안내문구를 표시합니다.	string	-
size	숫자 입력 필드 타입 (number)의 크기를 지정할 수 있습니다.	small medium large	medium
step	증가하거나 감소하는 숫자입니다.	number	1
onChange	change 이벤트를 처리하는 핸들러 설정	(value) => void	-

Checkbox API

체크 박스 타입 (checkbox)의 경우

Property	Description	Type	default
checked	체크박스의 선택 여부를 지정합니다.	boolean	false
onChange	change 이벤트를 처리하는 핸들러 설정	(event) => void	-

RadioGroup API

RadioGroup은 여러 Radio 버튼을 하나로 묶는 Wrapper 컴포넌트입니다.

Property	Description	Type	default
value	현재 선택된 값을 설정하는데 사용합니다.	any	-
name	Radio 버튼을 하나로 묶을 name 속성을 지정합니다.	string	-
color	RadioGroup으로 묶인 모든 Radio 버튼의 색상을 지정할 수 있습니다.	ColorName	blue6
disabled	RadioGroup으로 묶인 모든 Radio 버튼을 비활성화 시킬 수 있습니다.	boolean	false
onChange	change 이벤트를 처리하는 핸들러 설정	(event) => void	-

Radio API

라디오 버튼 타입 (radio)의 경우

Property	Description	Type	default
value	입력 값	any	-
name	Radio 버튼을 하나로 묶을 name 속성을 지정합니다.	string	-
checked	Radio의 선택 여부를 지정합니다.	boolean	false
disabled	Radio 버튼을 비활성화 시킬 수 있습니다.	boolean	false
onChange	change 이벤트를 처리하는 핸들러 설정	(value) => void	-

.css-6ojbmi{background-color:#ffe58f;}Input