textarea

Captures multiline user input.

Import

Import just the textarea styles.

@import "@winnie-ui/css/spatial/textarea";
@import "@winnie-ui/css/visual/textarea";

Anatomy

Attach the appropriate data attributes in the structure below.

<textarea data-component="textarea" />

Examples

Disabled

Use the disabled attribute to prevent user interaction.

Invalid

textarea will respect the :invalid selector when it is used in a form. Use the data-invalid attribute to manually control the invalid state of the texarea.

Reference

textarea

Represents the textarea element.

Attribute	Value
`data-disabled`	`boolean`
`data-invalid`	`boolean`

Modifier	Description
`hovered`	When the textarea is hovered with a mouse
`pressed`	When the textarea is pressed with a mouse or keyboard
`disabled`	When the textarea prevents user interaction
`invalid`	When the textarea is in an invalid state in a form

Variable
`--wui-textarea-background-<?modifier>`
`--wui-textarea-border-<?modifier>`
`--wui-textarea-box-shadow-<?modifier>`
`--wui-textarea-color-<?modifier>`
`--wui-textarea-placeholder-color`