File input
The File input component allows users to attach one file to a form field by browsing their device.
import { ... } from '@ag.ds-next/react/file-input';Usage
File input components can be imported via the file-input entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/file-input';Props
| Prop | Type | Description |
|---|---|---|
| label | string | Describes the purpose of the field. |
| accept? | string | ("application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | "application/pdf" | "application/rtf" | "application/vnd.ms-excel" | ... 23 more ... | "video/mpeg")[] | |
| autoFocus? | boolean | |
| buttonSize? | "sm" | "md"Default: "sm" | The size of the button. |
| capture? | boolean | "user" | "environment" | |
| disabled? | boolean | |
| hideOptionalLabel? | boolean | If true, "(optional)" will never be appended to the label. |
| hint? | string | Provides extra information about the field. |
| id? | string | |
| invalid? | boolean | If true, the invalid state will be rendered. |
| message? | string | Message to show when the field is invalid. |
| multiple? | boolean | |
| name? | string | |
| onBlur? | FocusEventHandler<HTMLInputElement> | |
| onChange? | ChangeEventHandler<HTMLInputElement> | |
| onFocus? | FocusEventHandler<HTMLInputElement> | |
| ref? | Ref<HTMLInputElement> | |
| required? | boolean | If `false` or `undefined`, "(optional)" will be appended to the label. |
| value? | string | number | readonly string[] |
Source
You can view the full source code for this package on Github.