TextField

라벨·입력·에러를 묶은 통합형 텍스트 필드

개요

TextField는 라벨·입력·에러 메시지를 사용하기 쉽게 완성된 형태로 제공되는 컴포넌트입니다.

기본 예시

이메일

import { useState } from 'react';

import { TextField } from '@bigmobility/vinyl-ui/field';

export default function TextFieldExample() {
  const [field, setField] = useState({
    email: '',
    error: '',
  });

  const handleChange = ({ name, value }: {
    name: string;
    value: string;
  }) => {
    setField({
      ...field,
      [name]: value,
    });
  }

  return (
    <TextField
      name="email"
      label="이메일"
      value={field.email}
      placeholder="you@example.com"
      required
      errorMessage={field.error}
      onChangeField={handleChange}
    />
  );
}

에러

errorMessage를 전달하면 에러 상태가 되어 입력 스타일이 바뀌고 메시지가 노출됩니다.

이메일

올바른 이메일 형식이 아닙니다

<TextField
  name="email"
  label="이메일"
  value={email}
  errorMessage={error}
  onChangeField={({ value }) => setEmail(value)}
/>

Required · Disabled

이름

아이디

Type

입력 타입을 지정합니다. 모바일 키보드·시맨틱에 영향을 줍니다.

전화번호

Props

Prop	Type	Default	Description
`name`	`string`	—	필드 이름 (필수). id 생성(`input-{name}`)·onChangeField 키로 사용
`value`	`string`	—	입력 값 (필수, 제어)
`label`	`string`	—	라벨 텍스트 (없으면 라벨 미표시)
`type`	`text \| email \| tel \| number`	`text`	입력 타입
`errorMessage`	`string`	—	에러 메시지. 값이 있으면 에러 상태로 전환
`required`	`boolean`	`false`	필수 입력 표시
`disabled`	`boolean`	`false`	비활성화
`placeholder`	`string`	—	플레이스홀더
`ref`	`Ref`	—	내부 input(HTMLInputElement) 요소 ref
`onChangeField`	`(payload: { name: string; value: string; }) => void`	—	값 변경 콜백 (필수)