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 (<FileInputlabel="대표 사진"accept="image/*"value={file}onChange={setFile}supportingText="대표 사진 (로고 등)을 첨부해주세요. 1:1 비율을 사용하세요."/>);}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | 인풋 상단 라벨 텍스트 |
value | File | null | - | 현재 선택된 파일 |
onChange | (file: File | null) => void | - | 파일 변경 콜백 |
accept | string | - | 허용할 파일 타입 (e.g. "image/*") |
isError | boolean | false | 에러 상태 여부 |
isDisabled | boolean | false | 비활성화 여부 |
required | boolean | false | 필수 입력 여부 (라벨 옆 빨간 점) |
supportingText | string | - | 인풋 하단 안내 텍스트 |
width | number | - | 컴포넌트 너비 (px) |
customStyle | CSSObject | - | 컨테이너 커스텀 CSS |