Sections
Components
- AlertBanner
- AlertDialog
- Alert
- Avatar
- Badge
- Breadcrumb
- Button
- CalendarIcon
- CellLayout
- CellLink
- Checkbox
- Collapse
- ContentSwitcher
- ControlLabel
- DatePicker
- Dialog
- Divider
- Drawer
- EmptyCell
- EmptyState
- Empty
- ErrorOverlay
- FilterBar
- FilterChips
- Flex
- GridLayout
- HumanisedDate
- Icon
- InputDuration
- InputField
- Input
- Label
- Loader
- MoreActions
- NumberInput
- OutsideClickHandler
- PageLoader
- Page
- Popconfirm
- Popover
- ProgressPie
- Progress
- RadioButtonGroup
- RadioGroup
- Radio
- RelativeTime
- Resizable
- SearchInput
- Select
- SkeletonText
- Skeleton
- Space
- SquadAvatarList
- StatusPicker
- Stepper
- Switch
- TableLight
- Tabs
- Tag
- Text
- Textarea
- Toast
- Tooltip
- TriggerSelect
- Upload
Upload
File upload dropzone / control.
import { Upload } from "@/rl-ui";
<Upload label="Attachments" />Examples#
Error & success#
import { Upload } from "@/rl-ui";
<>
<Upload variant="error" error="File too large" label="Upload" />
<Upload variant="success" successMessage="Uploaded" label="Upload" />
</>Sizes#
import { Upload } from "@/rl-ui";
<>
<Upload size="sm" label="Small" />
<Upload size="lg" label="Large" />
</>API#
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "error" | "success" | "default" | Visual state. |
size | "default" | "sm" | "lg" | "default" | Control size. |
label | string | "Upload file" | Field label. |
helperText | string | — | Hint text. |
error | string | — | Error message. |
successMessage | string | — | Success message. |
multiple | boolean | false | Allow multiple files. |
disabled | boolean | false | Disable uploads. |
maxSize | number | 52428800 | Max bytes (default 50MB). |
acceptedFileTypes | Record<string, string[]> | — | Accept map for dropzone. |
onFilesSelected | (files) => void | — | Accepted files callback. |