Textarea

Retrieve multi-line user input.

Usage

First of all, you need to import the Textarea component from the kitchn package.

import { Textarea } from "kitchn"

Default

<Container gap={10}>
  <Textarea 
    placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  />
</Container>

↓Code Editor

<Container gap={10}>
  <Textarea 
    placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  />
</Container>

Disabled

<Container gap={10}>
  <Textarea 
    disabled
    placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  />
</Container>

↓Code Editor

<Container gap={10}>
  <Textarea 
    disabled
    placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  />
</Container>

Error

<Container gap={10}>
  <Textarea
    errored 
    defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  />
</Container>

↓Code Editor

<Container gap={10}>
  <Textarea
    errored 
    defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  />
</Container>

Props

Name	Type	Default	Required	Description	Accepted values
`placeholder`	`string`	`-`	-	The placeholder of the textarea.	`-`
`disabled`	`boolean`	`false`	-	The status (disabled or not) of the input.	`-`
`errored`	`boolean`	`false`	-	The type of the textarea.	`-`
`defaultValue`	`string`	`-`	-	The default value of the textarea.	`-`
`width`	`number` \| `string`	`100%`	-	The width of the textarea.	`-`
`height`	`number` \| `string`	`auto`	-	The height of the textarea.	`-`
`resize`	`string`	`primary`	-	The CSS `resize` attribute of the textarea.	`none`, `both`, `horizontal`, `vertical`

Text Toast