Textarea

Textareas collect longer freeform content while still matching the surrounding field system.

Basic Usage

Use a textarea when users need more room than a single-line input can comfortably provide.

Sizes

The textarea size scale matches the rest of the field system so longer-form inputs still align cleanly with nearby controls.

Widths

Textareas are full-width by default. Constrain the parent for field layouts, or set an explicit width when the textarea needs to be fixed.

Validation

Use validation state in the same way as other fields so error styling stays consistent across the form system.

Disabled

Disable the textarea when longer-form content should be visible but not editable.

Resize

Textareas remain vertically resizable by default so longer content can expand without changing the field type.

Character Count

Show a character count when text length matters but the field should remain flexible.

API

Slots

Name	Description
label	—
instructions	—
hint	Alias for instructions

Props

Name	Description
customError	Custom validation message; also settable via setCustomValidity(). Type string | null Default null
defaultValue	Type string | null Default null
disabled	Disables the control and excludes it from constraint validation. Type boolean Default false
fitCell	Flush + fill parent cell (editable tables). Type boolean Default false
instructions	Type string
invalid	Type boolean Default false
isInvalid	Alias for invalid.
label	Type string
maxlength	Type number | undefined
name	Name submitted with form data. Type string | null Default null
placeholder	Type string
readonly	Type boolean Default false
readOnly	Alias for readonly.
required	Marks the control as required for form submission. Type boolean Default false
rows	Native rows — use 1 in table cells so intrinsic height doesn't overflow. Type number | undefined
size	Type PkTextareaSize Default default
withInstructions	Type boolean Default false
withLabel	Type boolean Default false

Methods

Name	Description
checkValidity()	Runs constraint validation without showing the browser UI.
reportValidity()	Runs constraint validation and shows the browser UI when invalid.
resetValidity()	Clears custom errors and re-syncs validity state.
setCustomValidity(message: string)	Sets or clears a custom validation message.

Events

Name	Description
onBlur	—
onChange	—
onFocus	—
onInput	—

Custom States

Name	Description	CSS selector
disabled	The control is disabled.	:state(disabled)
invalid	The control currently fails constraint validation.	:state(invalid)
optional	The control is not required.	:state(optional)
required	The control is required.	:state(required)
user-invalid	Invalid after the user has interacted with the control.	:state(user-invalid)
user-valid	Valid after the user has interacted with the control.	:state(user-valid)
valid	The control currently passes constraint validation.	:state(valid)

CSS Parts

Name	Description	CSS selector
form-control	Wrapper	::part(form-control)
instructions	Instructions	::part(instructions)
label	Label	::part(label)
textarea	Native textarea	::part(textarea)