Textarea

Sizes

<DemoSpaceX>
  <VelvetTextarea @size="sm" />
  <VelvetTextarea @size="md" />
  <VelvetTextarea @size="lg" />
</DemoSpaceX>

<VelvetTextarea @isDisabled={{true}} />

<VelvetTextarea @isInvalid={{true}} />

<VelvetTextarea @placeholder="Type something here..." />

Use the @onInput argument to handle input events.

Value: Value

<DemoSpaceY>
  <div>Value: {{this.value}}</div>
  <VelvetTextarea @onInput={{this.onInput}} @value={{this.value}} />
</DemoSpaceY>

Use the @onChange argument to handle change events.

Value: Value

<DemoSpaceY>
  <div>Value: {{this.value}}</div>
  <VelvetTextarea @onChange={{this.onChange}} @value={{this.value}} />
</DemoSpaceY>

This component does not accept any blocks.

Name	Description	Type	Default Value
`@isDisabled`	Indicate if the textarea is disabled.	`boolean`	`false`
`@isInvalid`	Indicate if the textarea is invalid.	`boolean`	`false`
`@onChange`	Handle the textarea's `change` event.	`(value: string, event: Event) => void`	`undefined`
`@onInput`	Handle the textarea's `input` event.	`(value: string, event: Event) => void`	`undefined`
`@placeholder`	The placeholder of the textarea.	`string`	`""`
`@size`	The size of the textarea.	`'sm' \| 'md' \| 'lg'`	`"md"`
`@value`	The value of the textarea.	`string`	`""`
`@variant`	The appearance of the textarea.	`string \| 'primary'`	`"primary"`

Arguments marked with * are required.