Forms

Textarea

A multi-line text input with a label and help text.

fandry-textarea

Example

Link to section Example

Custom colors and parts

Link to section Custom colors and parts

The same component with a few --fd-* tokens set around it and its parts restyled. The code is under Parts below.

Props

Link to section Props

Prop	Type	Default	Description
`label`	`string`	`''`	Visible label.
`help-text`	`string`	`''`	Helper text below the field.
`error-text`	`string`	`''`	An error shown under the field: the field is invalid while it has one (`aria-invalid`, the `invalid` state), and a screen reader hears it when it appears and when the field is focused.
`rows`	`number`	`3`	Visible row count.
`disabled`	`boolean`	`false`	Disables the field.
`label · help-text · error-text (slots)`	`slot`	`the props`	Markup in place of the label, help text or error text. Shown even without the matching prop.

Parts

Link to section Parts

Style the elements inside the component from your own CSS with ::part(). Every fandry component renders in native shadow DOM, so parts work on LWR and Salesforce alike. For colors, spacing, radius and type across many components, set the --fd-* tokens instead. The code for the "Custom colors and parts" example above:

Part	Description
`base`	The outermost element.
`label`	The label.
`control`	The box the field draws: a text field's border, a select's button, a checkbox's box, a radio's circle, a switch's track.
`textarea`	The native `<textarea>`.
`help-text`	The help text under the field.
`error-text`	The error under the field. In the page even while empty, so style it only for a field that is `invalid`.
`required`	The required-field asterisk.

States are extra names on a part while the state is on. Name both to style one state, e.g.fandry-checkbox::part(control checked).

State	Description
`disabled`	A control, option or item that cannot be used.
`invalid`	A field that has error text.

<!-- template -->
<div class="brand narrow">
  <fandry-textarea label="Gift message" placeholder="Add a note for the recipient" rows="3"></fandry-textarea>
</div>

/* css */
/* Scoped to this demo. Set the same --fd-* tokens on :root to theme
   every fandry-* component on the site. */
.brand {
  --fd-radius-md: 1rem;
  --fd-border-focus: 160 84% 36%;
  --fd-ring-color: 160 84% 36%;
}

fandry-textarea::part(control) {
  padding: 0.75rem 1rem;
  font-family: Georgia, "Times New Roman", serif;
  background: hsl(45 90% 97%);
}

fandry-textarea::part(label) {
  font-weight: 700;
}

Code

Link to section Code

<fandry-textarea label="Notes" rows="4"></fandry-textarea>