Textarea

When a single line won't do, our TextArea steps in. It's a roomy space for all the text your users want to type

Example

1  import { Textarea, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox gap='3' direction='column' justify='center'>
4    <Textarea />
5  </FlexBox>
6

API Reference

Component	Description
Textarea	Meet Textarea, the digital canvas for your user's thoughts. Perfect for gathering extensive feedback or long-form entries, this versatile component offers multi-row support and optional resizing. Whether fixed or dynamically adjusting, Textarea ensures accessibility and style. With a built-in disabled mode, it's here to adapt to all your requirements.

Component Properties

Textarea

Prop	Type	Default	Explanation
`size`	`string`	md	The tailor. Just like for Textarea component, adjust padding and font size to suit the scene, be it a cozy small textarea or a spacious large one.
`variant`	`string`	default	The wardrobe. Choose from 'outline', 'glass', or 'ghost' for Textarea's overall style. A fashionista at heart!
`state`	`string`	-	The mood ring. Reflect the textarea's state with 'invalid', 'valid', or 'warning'. It’s like Textarea'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 Textarea to elevate it from the page, like a soft-focus spotlight.
`block`	`boolean`	false	When set to true, your Textarea stretches out to take up the full width of its parent container, offering a more expansive canvas for user Textarea.
`id`	`string`		Like a personal name tag, the 'id' is a unique identifier for your Textarea, especially important when pairing with Labels as 'htmlFor'.
`label`	`string`		Provides a human-friendly caption for the Textarea, informing users what they're expected to type into the field.
`disabled`	`boolean`	false	Sometimes, we need to keep the words at bay. The disabled prop locks the Textarea, preventing any new Textarea or changes. It's like a pause button for user interaction.
`animation`	`boolean`	true	The smooth operator. When true, it adds subtle transitions to Textarea's properties, making them change like a graceful ballet.
`resize`	`string`	vertical	Control your Textarea's ability to change shape. Set it to 'none', 'vertical', 'horizontal', or 'both' to determine how users can adjust the size of the field, giving you the FlexBoxibility to accommodate a variety of content lengths.
`rows`	`number`	5	The number of lines visible at once. Your Textarea can be as expansive as an open field or as compact as a tiny note, depending on your needs.
`onChange`	`function`		The vigilant listener. Assign a function to this prop and Textarea 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