Textarea component

The Textarea is a multi-line text input control allows users to enter any combination of letters, numbers, or symbols. It adds default styles to the native <textarea> HTML tag, providing a consistent and visually appealing appearance out of the box. The component supports autoresizing based on the content entered by the user and provides the option to display a character count.

Textarea in disabled state

SfTextarea comes with out-of-the-box styles for a disabled Textarea.

Readonly Textarea

SfTextarea comes with out-of-the-box styles for a readonly Textarea.

Invalid State

If you pass the invalid prop, the Textarea will be styled to indicate an invalid state.

Textarea with characters counter

The Textarea component provides the option to display a character count, allowing users to track the number of characters they have entered. This feature can be helpful when there are character limits or restrictions for the input.

import { $, component$, useComputed$, useSignal } from '@builder.io/qwik';
import { SfTextarea } from 'qwik-storefront-ui';

export default component$(() => {
  const characterLimit = 25;
  const disabled = false;
  const readonly = false;
  const invalid = false;
  const helpText = 'Help text';
  const errorText = 'Error';

  const valueSignal = useSignal('');

  const isAboveLimitSignal = useComputed$(() =>
    characterLimit ? valueSignal.value.length > characterLimit : false
  );

  const charsCountSignal = useComputed$(() =>
    characterLimit ? characterLimit - valueSignal.value.length : null
  );

  const getCharacterLimitClass = () =>
    isAboveLimitSignal.value
      ? 'text-negative-700 font-medium'
      : 'text-neutral-500';

  const onInput = $((e: Event) => {
    const target = e.target as HTMLInputElement;
    valueSignal.value = target.value;
  });

  return (
    <>
      <label>
        <span class="text-sm font-medium">Description</span>
        <SfTextarea
          value={valueSignal.value}
          placeholder="Write something about yourself..."
          invalid={invalid}
          disabled={disabled}
          onInput$={onInput}
          wrapperClass={['w-full mt-0.5 block']}
        />
      </label>
      <div class="flex justify-between mt-0.5">
        <div>
          {invalid && !disabled && (
            <p class="typography-text-sm text-negative-700 font-medium mt-0.5">
              {errorText}
            </p>
          )}
          {helpText && (
            <p
              class={[
                'typography-hint-xs',
                disabled ? 'text-disabled-500' : 'text-neutral-500',
              ]}
            >
              {helpText}
            </p>
          )}
        </div>
        {characterLimit && !readonly ? (
          <p
            class={[
              'typography-error-xs',
              disabled ? 'text-disabled-500' : getCharacterLimitClass(),
            ]}
          >
            {charsCountSignal.value}
          </p>
        ) : null}
      </div>
    </>
  );
});

Textarea with autoresize

The Textarea component supports autoresizing based on the content entered by the user. As the user types or deletes text, the height of the textarea adjusts automatically to fit the content, eliminating the need for scrollbars. In the example below we use @frsource/autoresize-textarea library to provide this feature.