/components/input/file-input
import { fileInput } from "@hedia/hexui/components/file-input";
export default {
Default,
WithLabel,
WithHelperText,
WithError,
Disabled,
Multiple,
};
export function Default() {
return [
fileInput({
id: "file-default",
name: "file",
}),
];
}
export function WithLabel() {
return [
fileInput({
id: "file-label",
label: "Upload a file",
name: "file",
}),
fileInput({
accept: "image/*",
id: "file-label-accept",
label: "Select Photo",
name: "photo",
}),
];
}
export function WithHelperText() {
return [
fileInput({
accept: "image/*",
helperText: "Upload a JPG, PNG, or GIF image (max 5MB)",
id: "file-helper",
label: "Profile Picture",
name: "photo",
}),
];
}
export function WithError() {
return [
fileInput({
error: true,
errorText: "Please select a file",
id: "file-error",
label: "Upload Document",
name: "document",
}),
];
}
export function Disabled() {
return [
fileInput({
disabled: true,
id: "file-disabled",
label: "Upload (disabled)",
name: "file",
}),
];
}
export function Multiple() {
return [
fileInput({
helperText: "You can select multiple files at once",
id: "file-multiple",
label: "Select Files",
multiple: true,
name: "files",
buttonText: "Select Files",
}),
];
}