InputFile

InputFile

import InputFile from "@kiwicom/orbit-components/lib/InputFile";
<InputFile />

Props

NameTypeDefaultDescription
allowedFileTypesstring \| string[]You can specify allow file types. See MDN
buttonLabelTranslation"Select file"The label for the Button inside InputFile. See Functional specs
dataTeststringOptional prop for testing purposes.
idstringSet id for InputFile
errorReact.NodeThe error message for the Select. See Functional specs
fileNamestringThe name of selected file.
helpReact.NodeThe help message for the InputFile.
labelTranslationThe label for the InputFile.
namestringThe name for the InputFile.
onBlurevent => void \| PromiseFunction for handling onBlur event.
onChangeevent => void \| PromiseFunction for handling onChange event.
requiredbooleanIf true, the label is displayed as required.
onFocusevent => void \| PromiseFunction for handling onFocus event.
onRemoveFile() => void \| PromiseFunction for handling file name removing.
placeholderTranslationString"No file selected"The placeholder for the InputFile. See Functional specs
reffuncProp for forwarded ref of the InputFile. See Functional specs
spaceAfterenumAdditional margin-bottom after component.
tabIndexstring \| numberSpecifies the tab order of an element
widthstring100%Specifies width of InputFile
helpClosablebooleantrueWhether to display help as a closable tooltip, or have it open only while the field is focused, same as error.
insideInputGroupbooleanfalseSet to true if InputFile is inside InputGroup
multiplebooleanIf set to true will allow to upload multiple files
disabledbooleanIf set to true will allow to upload multiple files

enum

spaceAfter
"none"
"smallest"
"small"
"normal"
"medium"
"large"
"largest"

Functional specs

class Component extends React.PureComponent<Props> {
componentDidMount() {
this.ref.current && this.ref.current.focus();
}
ref: { current: React.ElementRef<*> | null } = React.createRef();
render() {
return <InputFile ref={this.ref} />;
}
}