TextField

텍스트 입력 필드 컴포넌트는 사용자로부터 텍스트 입력을 받는 폼 요소입니다.

기본 사용법

import { TextField } from '@aift/ui/TextField';

export default function Preview() {
  return (
    <div className="max-w-md space-y-4">
      <TextField placeholder="입력하세요" />
      <TextField label="레이블" placeholder="레이블이 있는 입력 필드" />
      <TextField placeholder="비활성화된 필드" disabled />
      <TextField placeholder="에러 상태" error helperText="에러 메시지가 표시됩니다" />
    </div>
  );
}

import { TextField } from '@aift/ui/TextField';export default function Preview() {  return (    <div className="max-w-md space-y-4">      <TextField placeholder="입력하세요" />      <TextField label="레이블" placeholder="레이블이 있는 입력 필드" />      <TextField placeholder="비활성화된 필드" disabled />      <TextField placeholder="에러 상태" error helperText="에러 메시지가 표시됩니다" />    </div>  );}

Props

Prop	Type	Default	Description
label	`string`	-	입력 필드의 레이블
placeholder	`string`	-	플레이스홀더 텍스트
value	`string`	-	입력 값
onChange	`(e: ChangeEvent<HTMLInputElement>) => void`	-	값 변경 핸들러
disabled	`boolean`	`false`	비활성화 여부
error	`boolean`	`false`	에러 상태
helperText	`string`	-	도움말 텍스트

TextField

TextField

기본 사용법

Props

On this page