Components
FileInput is a standalone component.
FileInput is a standalone component.
The FileInput component is a styled file upload input that allows users to select files from their device. It supports various colors, sizes, and can be integrated with Join components.
| FileInput Props | Type | Description |
|---|---|---|
join | boolean | When true, applies join-item styling for use within a Join component. |
color | string | Sets the color of the file input. Options: - |
| primary | boolean | Sets the color to primary. |
| secondary | boolean | Sets the color to secondary. |
| accent | boolean | Sets the color to accent. |
| info | boolean | Sets the color to info. |
| success | boolean | Sets the color to success. |
| warning | boolean | Sets the color to warning. |
| error | boolean | Sets the color to error. |
ghost | boolean | Applies a ghost style with a transparent background. |
disabled | boolean | Disables the file input. |
size | string | Sets the size of the file input. Options: - |
| xl | boolean | Sets the size to xl. |
| lg | boolean | Sets the size to lg. |
| md | boolean | Sets the size to md. |
| sm | boolean | Sets the size to sm. |
| xs | boolean | Sets the size to xs. |
| FileInput Events | Arguments | Description |
|---|---|---|
files | Emitted when files are selected, providing the value of the file input. |
Showcases all color options for the FileInput component using shortcut boolean props.
Demonstrates the bordered prop for a FileInput with a visible border.
Applies a ghost style with a transparent background using the ghost prop.
Disables the file input using the disabled prop.
Shows all available sizes for the FileInput component using the size prop.