children?ReactNodedefaultValue?File[]invalid?booleanfalsemaxFiles?numberonChange?(files: FileList | null, event?: ChangeEvent<HTMLInputElement>) => voidref?Ref<HTMLInputElement>webkitDirectory?booleanfalse| Prop | Type | Default |
|---|---|---|
children? | ReactNode | - |
defaultValue? | File[] | - |
invalid? | boolean | false |
maxFiles? | number | - |
onChange? | (files: FileList | null, event?: ChangeEvent<HTMLInputElement>) => void | - |
ref? | Ref<HTMLInputElement> | - |
webkitDirectory? | boolean | false |
型ベース（内部で固定する一部attrsは除外）: InputHTMLAttributes<HTMLInputElement>
renderItem(props: { onClick: () => void; disabled: boolean; invalid: boolean; }) => ReactElement| Prop | Type | Default |
|---|---|---|
renderItem | (props: { onClick: () => void; disabled: boolean; invalid: boolean; }) => ReactElement | - |
clearable?booleanshowWebkitRelativePath?boolean| Prop | Type | Default |
|---|---|---|
clearable? | boolean | - |
showWebkitRelativePath? | boolean | - |
import { FileField } from '@k8ordo/ui';<FileField.Root accept="image/*" multiple={false}>
<FileField.Trigger
renderItem={({ disabled, onClick }) => (
<Button disabled={disabled} onClick={onClick}>
Select File
</Button>
)}
/>
<FileField.ItemList clearable />
</FileField.Root>{/* Accept only PDF and Word documents */}
<FileField.Root accept=".pdf,.doc,.docx" multiple={false}>
<FileField.Trigger
renderItem={({ disabled, onClick }) => (
<Button disabled={disabled} onClick={onClick}>
Select Document
</Button>
)}
/>
<FileField.ItemList clearable />
</FileField.Root><FileField.Root maxFiles={3} multiple>
<FileField.Trigger
renderItem={({ disabled, onClick }) => (
<Button disabled={disabled} onClick={onClick}>
Select Files (max 3)
</Button>
)}
/>
<FileField.ItemList clearable />
</FileField.Root><FileField.Root disabled multiple={false}>
<FileField.Trigger
renderItem={({ disabled, onClick }) => (
<Button disabled={disabled} onClick={onClick}>
Select File
</Button>
)}
/>
<FileField.ItemList clearable />
</FileField.Root><FileField.Root invalid multiple={false}>
<FileField.Trigger
renderItem={({ disabled, onClick }) => (
<Button disabled={disabled} onClick={onClick}>
Select File
</Button>
)}
/>
<FileField.ItemList clearable />
</FileField.Root>