Input

When your user has something to say, our Input field is ready. A cozy spot for thoughts, ideas, and data.

Example

1  import { Input, Flex } from '@haktos/sugarcoat-ui';
2
3  <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 `htmlFor` attribute automatically ties the knot with Input's ID.
`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.