2.0 KiB

Czysty Wina Historia

Textarea

[component-header:sl-textarea]

Textareas collect data from the user and allow multiple lines of text.

<sl-textarea></sl-textarea>

?> This component doesn't work with standard forms. Use <sl-form> instead.

?> Please refer to the section on form control validation to learn how to do client-side validation.

Examples

Rows

Use the rows attribute to change the number of text rows that get shown.

<sl-textarea rows="2"></sl-textarea>

Placeholders

Use the placeholder attribute to add a placeholder.

<sl-textarea placeholder="Type something"></sl-textarea>

Disabled

Use the disabled attribute to disable an input.

<sl-textarea placeholder="Textarea" disabled></sl-textarea>

Sizes

Use the size attribute to change a textarea's size.

<sl-textarea placeholder="Small" size="small"></sl-textarea>
<br>
<sl-textarea placeholder="Medium" size="medium"></sl-textarea>
<br>
<sl-textarea placeholder="Large" size="large"></sl-textarea>

Labels

Use the label attribute to give the textarea an accessible label. For labels that contain HTML, use the label slot instead.

<sl-textarea label="Comments"></sl-textarea>

Help Text

Add descriptive help text to a textarea with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.

<sl-textarea 
  label="Feedback" 
  help-text="Please tell us what you think."
>
</sl-textarea>

Prevent Resizing

By default, textareas can be resized vertically by the user. To prevent resizing, set the resize attribute to none.

<sl-textarea resize="none"></sl-textarea>

Expand with Content

Textareas will automatically resize to expand to fit their content when resize is set to auto.

<sl-textarea resize="auto"></sl-textarea>

[component-metadata:sl-textarea]

2.0 KiB Czysty Wina Historia