File Uploader

Make file uploads a piece of cake with our File Uploader. Click, choose, and voila – the file is on its way!

Example

1 import { Input, FlexBox } from '@sugarcoat/ui';
2
3 <FlexBox gap='3' direction='column' justify='center'>
4 <FileUploader preview='thumbnail' actionUrl="https://httpbin.org/post" name='image' accept='image/*' label="Upload your avatar" variant='outline' manualUpload multiple block />
5 </FlexBox>
6

API Reference

ComponentDescription
Input

The ultimate text whisperer! Input is your versatile pal for collecting text-based info from users. Whether it's a name, password, or a secret recipe, Input handles it with flair and accessibility.

Component Properties

Input
PropTypeDefaultExplanation
sizestringmd

The tailor. Adjust padding and font size to suit the scene, be it a cozy small input or a spacious large one.

variantstringdefault

The wardrobe. Choose from 'outline', 'glass', or 'ghost' for Input’s overall style. A fashionista at heart!

statestring-

The mood ring. Reflect the input's state with 'invalid', 'valid', or 'warning'. It’s like Input’s own set of emojis.

radiusstringmd

The sculptor. Customize the border-radius to shift from squared-off serious to smoothly rounded.

shadowstringmd

The enchanter. Cast a box-shadow around Input to elevate it from the page, like a soft-focus spotlight.

blockbooleanfalse

When set to true, your Input stretches out to take up the full width of its parent container, offering a more expansive canvas for user input.

idstring-

The connector. This ID ensures that Input and its Label are in sync. The Label's htmlFor attribute automatically ties the knot with Input's ID.

labelstring-

The headline act. Place a text label above the Input field to guide users on what to type. It’s like an elegant signpost.

animationbooleantrue

The smooth operator. When true, it adds subtle transitions to Input's properties, making them change like a graceful ballet.

disabledbooleanfalse

Sometimes, we need to keep the words at bay. The disabled prop locks the Input, preventing any new input or changes. It's like a pause button for user interaction.

leftElementReact.ReactNode-

Meet the doorman. Add an element or icon on the left side of the Input that sets the stage for the user's text.

rightElementReact.ReactNode-

The swanky closing act. It’s the left element’s twin, but on the right, perfect for a search icon or some other cool finale touch.

onChangefunction-

The vigilant listener. Assign a function to this prop and Input turns into your very own detective, ready to notify you of every change that takes place.

Customize The Look
Check out these sample themes
Or create your ownBrand color
Accent color
Neutral color
Border radius