Textarea

multi-line text entry with the same chrome as Input, sized by rows.

Playground

Release notes

Markdown supported.

state

size

Using it

Angular	lucent-textarea import { LucentTextarea } from '@design-foundry/lucent-angular';
Stylesheet	.lucent-textarea @design-foundry/lucent-styles/core.css

API

Name	Kind	Type	Default	Description
size	input	xs \| sm \| md \| lg	md	control density.
placeholder	input	string	''	placeholder text.
rows	input	number	3	initial visible rows.
readonly	input	boolean	false	read-only field.

Slots

Attribute	Description
lucentLabel	field label.
lucentHint	helper text below the field.
lucentError	error message; its presence sets the error state.

Theming

Color (11)

--color--semantic--error --color--semantic--error-subtle --color--semantic--surface-default --color--semantic--text-default --color--semantic--text-muted --color--semantic--text-strong --color--semantic--text-subtle --control-text-lg --control-text-md --control-text-sm --control-text-xs

Size & spacing (18)

--control-height-lg --control-height-md --control-height-sm --control-height-xs --control-pad-x-lg --control-pad-x-md --control-pad-x-sm --control-pad-x-xs --control-radius-lg --control-radius-md --control-radius-sm --control-radius-xs --dimension--primitive--spacing-0-5 --dimension--primitive--spacing-1 --dimension--primitive--spacing-1-5 --dimension--primitive--spacing-2 --dimension--primitive--spacing-2-5 --typography--micro--font-size

Border & radius (3)

--border-default --border-strong --border-subtle

Type (4)

--dimension--primitive--fw-light --dimension--primitive--lh-normal --dimension--primitive--lh-relaxed --font--primitive--sans