components
Selector box file
v.1.0.0 | Saturn
StorybookUsage
import { SelectorBoxFile } from '@kubit-ui-web/react-components'
12345678910
<SelectorBoxFile containerBoxStateContent={{ ['DEFAULT']: { icon: { icon: 'UPLOAD' }, actionText: { content: 'Browse and select a file' }, description: { content: 'and upload it here' }, }, ['LOADING']: { icon: { icon: 'UPLOAD' }, actionText: { content: 'Cancel upload' },
Props
Let's delve into the versatility of the selectorBoxFile component by examining all its avalaible props.
| Property | Type | Default | Description |
|---|---|---|---|
| accept | String | - | Input file accept |
| button | SelectorBoxFileButtonType | - | Object with button properties |
containerBoxStateContent Required | SelectorBoxFileContainerBoxStateContentType | - | Container box literals (icon and text) |
| dataTestId | String | - | Testing id |
| disabled | Boolean | false | Specifies if the selectorBoxFile component is disabled or not |
| description | SelectorBoxFileTextType | - | Object with description properties |
| error | Boolean | false | Defines if component has errors |
| errorMessage | SelectorBoxFileTextType | - | Object with error message properties |
| errorMessageIcon | IElementOrIcon | - | Object with error message icon properties |
| errorFileExtensionMessage | SelectorBoxFileTextType | - | Object for custom message when file extension is wrong |
| errorMaxSizeMessage | SelectorBoxFileTextType | - | Object for custom message when file size is wrong |
| fileExtension | Array | - | Allowed extensions |
| filename | String | - | Uploading file name |
| id | String | - | Input file id |
| loading | Boolean | false | If component is loading or not |
| maxSize | Number | - | Max file size (mb) |
| multiple | Boolean | false | Input file multiple |
| name | String | - | Input file name |
| onChange | React.ChangeEventHandler | - | Input file onChange |
| onClick | MouseEventHandler | - | Input file onClick |
| onFileError | (status: boolean) => void | - | CallBack File Extension Error |
| onSizeError | (status: boolean) => void | - | CallBack File Size Error |
| success | Boolean | false | Component uploaded the file properly |
| subtitle | SelectorBoxFileTextType | - | Object with subtitle properties |
| title | SelectorBoxFileTextType | - | Object with title properties |
| tooltip | SelectorBoxFileTooltipType | - | When present a tooltip will be shown |
| tooltipIcon | IElementOrIcon | - | Object with tooltip icon properties. Icon next to the subtitle |
variant Required | String | DEFAULT | Variant of selectorBoxFile |
| ctv | Object | - | Object used for update variant styles |