Textarea

The bq-textarea component is a multi-line text input with label, error, hint, and native form participation.

Basic Usage

<bq-textarea label="Message" placeholder="Type your message here"></bq-textarea>

With Value

<bq-textarea label="Bio" value="Hello, I'm a developer."></bq-textarea>

Rows

<bq-textarea label="Description" rows="6"></bq-textarea>

Required

<bq-textarea label="Feedback" required></bq-textarea>

Error State

<bq-textarea label="Comment" error="This field is required."></bq-textarea>

Hint Text

<bq-textarea label="Notes" hint="Max 500 characters." maxlength="500"></bq-textarea>

Character Counter

Use show-counter together with maxlength to display a live character count below the textarea.

<bq-textarea
  label="Bio"
  maxlength="200"
  show-counter
  placeholder="Tell us about yourself"
></bq-textarea>

The counter:

• Displays in the format "{count} of {max} characters"
• Turns red when the character limit is exceeded
• Includes aria-live="polite" for screen reader announcements
• Is linked to the textarea via aria-describedby

Disabled & Readonly

<bq-textarea label="Locked" value="Cannot edit" disabled></bq-textarea>
<bq-textarea label="View only" value="Read-only content" readonly></bq-textarea>

Properties

Property	Type	Default	Description
label	string	—	Visible label text
value	string	—	Current value
placeholder	string	—	Placeholder text
name	string	—	Form field name
rows	number	4	Visible row count
disabled	boolean	false	Disables the textarea
readonly	boolean	false	Makes the textarea read-only
required	boolean	false	Marks as required
error	string	—	Error message
hint	string	—	Hint text
maxlength	string	—	Maximum character count
show-counter	boolean	false	Show character counter (requires maxlength)

Events

Event	Detail	Description
bq-input	{ value: string }	Fired on each keystroke
bq-change	{ value: string }	Fired on commit/blur
bq-focus	—	Fired on focus
bq-blur	—	Fired on blur

CSS Parts

Part	Description
field	The field wrapper
label	Label text element
textarea	The native textarea
footer	The footer area below the textarea
error	Error message element
hint	Hint text element
counter	Character counter element

Accessibility

• Links label to textarea via for/id
• Sets aria-invalid when error is present
• Links error/hint/counter to textarea via aria-describedby
• Character counter uses aria-live="polite" for updates

Form Participation

The component creates a hidden input proxy for native <form> submission carrying the name and current value.