메인 콘텐츠로 건너뛰기
헤더

​
텍스트 입력

사용자가 텍스트를 입력하고 편집할 수 있습니다. 
import { RecoilRoot } from "recoil";
import { TextInput } from "@/ui/input/components/TextInput";

export const MyComponent = () => {
  const handleChange = (text) => {
    console.log("입력 변경됨:", text);
  };

  const handleKeyDown = (event) => {
    console.log("키가 눌림:", event.key);
  };

  return (
    <RecoilRoot>
      <TextInput
        className
        label="사용자 이름"
        onChange={handleChange}
        fullWidth={false}
        disableHotkeys={false}
        error="유효하지 않은 사용자 이름"
        onKeyDown={handleKeyDown}
        RightIcon={null}
      />
    </RecoilRoot>
  );
};

​
자동 크기 조정 텍스트 입력

내용에 따라 자동으로 높이가 조정되는 텍스트 입력 컴포넌트. 
import { RecoilRoot } from "recoil";
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";

export const MyComponent = () => {
  return (
    <RecoilRoot>
      <AutosizeTextInput
        onValidate={() => console.log("onValidate 함수 실행됨")}
        minRows={1}
        placeholder="댓글을 작성하세요"
        onFocus={() => console.log("onFocus 함수 실행됨")}
        variant="icon"
        buttonTitle
        value="작업: "
      />
    </RecoilRoot>
  );
};

​
텍스트 영역

다중 라인 텍스트 입력을 만들 수 있습니다. 
import { TextArea } from "@/ui/input/components/TextArea";

export const MyComponent = () => {
  return (
    <TextArea
    disabled={false}
    minRows={4}
    onChange={()=>console.log('onChange 함수 실행됨')}
    placeholder="여기에 텍스트를 입력하세요"
    value=""
    />
  );
};