Textarea - CSS Component

...

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Construction

Common API

For the basics, check the common specifications.

The CSS component uses the <label> tag.

z-textarea

The z-textarea is the main parameter used to render the textarea component.

TextareaTextarea

TIP

Setting a maxlength attribute to the input will limit the number of characters that can be entered into the input.

Also you can display a counter of the remaining characters, using the output tag.

Textarea

0 / 100

Playground

Customization

HTML Examples

Imports

<script type="module" src="/0.5.0/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Textarea.css" />

Code

<!-- Default -->
<label z-textarea>
  <span>Textarea</span>
  <textarea placeholder=""></textarea>
</label>
<label z-textarea="shaped">
  <span>Textarea</span>
  <textarea placeholder=""></textarea>
</label>

<!-- With value -->
<label z-textarea>
  <span>Textarea</span>
  <textarea placeholder="">Some text</textarea>
</label>
<label z-textarea="shaped">
  <span>Textarea</span>
  <textarea placeholder="">Some text</textarea>
</label>

<!-- Disabled -->
<label z-textarea>
  <span>Textarea</span>
  <textarea placeholder="" disabled></textarea>
</label>
<label z-textarea="shaped">
  <span>Textarea</span>
  <textarea placeholder="" disabled></textarea>
</label>

<!-- Readonly -->
<label z-textarea>
  <span>Textarea</span>
  <textarea placeholder="" readonly>Some text</textarea>
</label>
<label z-textarea="shaped">
  <span>Textarea</span>
  <textarea placeholder="" readonly>Some text</textarea>
</label>

<!-- With help text -->
<label z-textarea>
  <span>Textarea</span>
  <small>Help text</small>
  <textarea placeholder=""></textarea>
</label>
<label z-textarea="shaped">
  <span>Textarea</span>
  <small>Help text</small>
  <textarea placeholder=""></textarea>
</label>

<!-- With maxlength -->
<label z-textarea>
  <span>Textarea</span>
  <textarea placeholder="" maxlength="20"></textarea>
  <output>0 / 20</output>
</label>
<label z-textarea="shaped">
  <span>Textarea</span>
  <textarea placeholder="" maxlength="20"></textarea>
  <output>0 / 20</output>
</label>

<!-- Invalid -->
<label z-textarea>
  <span>Textarea</span>
  <small>Invalid input</small>
  <textarea placeholder="" data-invalid></textarea>
</label>
<label z-textarea="shaped">
  <span>Textarea</span>
  <small>Invalid input</small>
  <textarea placeholder="" data-invalid></textarea>
</label>