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, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox gap='3' direction='column' justify='center'>
4    <Input />
5  </FlexBox>
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.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius