Textarea

Allow users to enter text on multiple lines. This component uses the base structure of the Input component.

Figma component (opens in new tab)Storybook documentation (opens in new tab)

Textarea

React

<Textarea id="textarea" label="Textarea" />

CSS

<div class="input textarea">
  <label for="textarea" class="input_label">Textarea</label>
  <textarea id="textarea" rows="4" class="input_control"></textarea>
</div>

Usage

To follow user-centred design and GDPR best practices, we should only ask users for information we need. In that respect, all form fields of the Pallote component library are by default required.

For the CSS library, you do not need to add the required property to the form fields, it is added automatically with the javascript import.

Props

isFocused

Focus on a input on page load.

IsFocused

React

<Textarea id="focused" label="IsFocused" isFocused />

CSS

<div class="input input-focused textarea">
  <label for="focused" class="input_label">Focused</label>
  <textarea id="focused" rows="4" class="input_control"></textarea>
</div>

Error

Notify users that the field has an error.

Error

React

<Textarea id="error" label="Error" error="This is the error message" />

CSS

<div class="input input-error textarea">
  <label for="error" class="input_label">Error</label>
  <p class="input_error">This is the error message</p>
  <textarea id="error" rows="4" class="input_control"></textarea>
</div>

Disabled

Add this class to signal users the field is disabled.

Disabled

React

<Textarea id="disabled" label="Disabled" disabled />

CSS

<div class="input input-disabled textarea">
  <label for="disabled" class="input_label">Disabled</label>
  <textarea id="disabled" rows="4" class="input_control"></textarea>
</div>

Optional

Optional

React

<Textarea id="optional" label="Optional" optional />

CSS

<div class="input input-optional textarea">
  <label for="optional" class="input_label">Optional</label>
  <textarea id="optional" rows="4" class="input_control"></textarea>
</div>

Hint

Hint

This is a hint to give more details

React

<Textarea id="hint" label="Hint" hint="This is a hint to give more details" />

CSS

<div class="input textarea">
  <label for="hint" class="input_label">Hint</label>
  <p class="input_hint">This is a hint to give more details</p>
  <textarea id="hint" rows="4" class="input_control"></textarea>
</div>

Dense

Reduce the font size and padding for a more compact appearance.

Dense

React

<Textarea id="dense" label="Dense" dense />

CSS

<div class="input input-dense textarea">
  <label for="dense" class="input_label">Dense</label>
  <textarea id="dense" rows="4" class="input_control"></textarea>
</div>

HideLabel

Hide the label visually while keeping it accessible to screen readers.

Hidden Label

React

<Textarea id="hideLabel" label="Hidden Label" hideLabel placeholder="Label is hidden but accessible to screen readers" />

CSS

<div class="input textarea">
  <label for="hideLabel" class="input_label sr-only">Hidden Label</label>
  <textarea id="hideLabel" rows="4" class="input_control" placeholder="Label is hidden but accessible to screen readers"></textarea>
</div>