dodam dodam logo

B1ND Docs

FileInput

파일을 선택할 수 있는 인풋 컴포넌트입니다.


Preview

기본

label
파일을 선택하세요.

에러 상태

label
파일을 선택하세요.
파일을 선택해주세요.

비활성화

label
파일을 선택하세요.
파일 선택이 비활성화되어 있습니다.

필수 입력

label
파일을 선택하세요.

Usage

tsx
import { FileInput } from "@b1nd/dodam-design-system/components";
import { useState } from "react";
export default function Example() {
const [file, setFile] = useState<File | null>(null);
return (
<FileInput
label="대표 사진"
accept="image/*"
value={file}
onChange={setFile}
supportingText="대표 사진 (로고 등)을 첨부해주세요. 1:1 비율을 사용하세요."
/>
);
}

Props

PropTypeDefaultDescription
labelstring-인풋 상단 라벨 텍스트
valueFile | null-현재 선택된 파일
onChange(file: File | null) => void-파일 변경 콜백
acceptstring-허용할 파일 타입 (e.g. "image/*")
isErrorbooleanfalse에러 상태 여부
isDisabledbooleanfalse비활성화 여부
requiredbooleanfalse필수 입력 여부 (라벨 옆 빨간 점)
supportingTextstring-인풋 하단 안내 텍스트
widthnumber-컴포넌트 너비 (px)
customStyleCSSObject-컨테이너 커스텀 CSS