Textarea

Multi-line text input. Shares the text-input visual contract (border mix, focus ring, invalid hook) and adds a $min-height floor plus a vertical-only resize default so resizing stays predictable inside narrow grid columns.

Live

Default (vertical-only resize)

<textarea rows="3" placeholder="A few lines about yourself.">A few lines about yourself.</textarea>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'element-textarea')
);
Playground

Markup

markup
<textarea rows="3">A few lines about yourself.</textarea>

When to use

  • Free-form multi-line input (bio, message, address block).
  • For single-line input use Text input.
  • For very large rich-text fields, lift to a dedicated editor — the textarea is plain-text only.

Variables

VariableDefaultNotes
$selector'textarea'Element selector.
$padding-y$size-extra-small (0.5rem)Vertical padding.
$padding-x$size-small (0.75rem)Horizontal padding.
$border-radius$global-border-radius (5px)Outer corner radius.
$border-width$global-border-width (1px)Stroke. Mixed at $border-mix against currentColor.
$focus-outline-width$global-focus-outline-width (2px)Focus-visible ring width.
$focus-outline-style$global-focus-outline-style (solid)Focus ring style.
$focus-outline-offset$global-focus-outline-offset (2px)Gap between border and ring.
$disabled-opacity$global-disabled-opacity (0.6)Routed through controls.disabledControl().
$border-mix$global-border-mix (50%)Border tint vs. currentColor. Clears WCAG 1.4.11 (3:1) on shipped themes.
$min-height4remFloor so the field can't collapse below ~3 lines on initial paint.
$resizeverticalUser resize axis. Set to both, horizontal, or none as needed.

Override example

app.scss
@use '@adnap/krysalicss/element/textarea' with (
  $min-height: 6rem,
  $resize: both,
);

Tokens consumed

TokenUsed for
--kc-input-bg / --kc-input-fgSurface fill and text colour. Optional: falls back to transparent + currentColor.
--kc-fgFocused border colour and focus-ring fallback.
--kc-focus-ringPainted on :focus-visible. Falls back to --kc-fg then currentColor.
--kc-danger-bgBorder tint when the control matches :user-invalid or [aria-invalid="true"].

Accessibility

  • Anchored on native <textarea>: every assistive-tech contract is the browser's.
  • Always pair with a <label> (visible or aria-labelledby) — placeholders alone fail WCAG 3.3.2.
  • Focus ring uses --kc-focus-ring with a fallback chain into --kc-fg / currentColor; the focused border also swaps to --kc-fg for redundant non-text contrast (WCAG 2.4.11 + 1.4.11).
  • Invalid state routes through :user-invalid + [aria-invalid="true"], so untouched required fields don't flag on first paint.
  • $resize: vertical keeps users from breaking column flow horizontally; the grab affordance remains for adjusting line count.

See also