- Accordion
- Alert Dialog
- Avatar
- Badge
- Banner
- BreadcrumbSOON
- Button
- Button Group
- Calendar
- Callout
- Card
- Checkbox
- CodeblockSOON
- Color PickerNEW
- Container
- Control Group
- Dialog
- Divider
- Dropdown
- File UploaderNEW
- Flex
- FormSOON
- Grid
- IconSOON
- ImageSOON
- Input
- LinkNEW
- List
- MenuSOON
- PaginationSOON
- Popover
- Progress
- Radio
- Section
- Select
- Skeleton
- SliderSOON
- SpinnerSOON
- Switch
- Table
- Tabs
- Tag
- Textarea
- ToastSOON
- Tooltip
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, Flex } from '@haktos/sugarcoat-ui';23 <Flex gap='3' direction='column' justify='center'>4 <Input />5 </Flex>6
API Reference
Component | Description |
---|---|
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
Prop | Type | Default | Explanation |
---|---|---|---|
size | string | md | The tailor. Adjust padding and font size to suit the scene, be it a cozy small input or a spacious large one. |
variant | string | default | The wardrobe. Choose from 'outline', 'glass', or 'ghost' for Input’s overall style. A fashionista at heart! |
state | string | - | The mood ring. Reflect the input's state with 'invalid', 'valid', or 'warning'. It’s like Input’s own set of emojis. |
radius | string | md | The sculptor. Customize the border-radius to shift from squared-off serious to smoothly rounded. |
shadow | string | md | The enchanter. Cast a box-shadow around Input to elevate it from the page, like a soft-focus spotlight. |
block | boolean | false | 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. |
id | string | - | The connector. This ID ensures that Input and its Label are in sync. The Label's |
label | string | - | The headline act. Place a text label above the Input field to guide users on what to type. It’s like an elegant signpost. |
animation | boolean | true | The smooth operator. When true, it adds subtle transitions to Input's properties, making them change like a graceful ballet. |
disabled | boolean | false | 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. |
leftElement | React.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. |
rightElement | React.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. |
onChange | function | - | 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. |