mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00

Files

Manuel Schmidt 8121faa1d4 Enrich components @summary with description from docs (#962 )

* keep header styles with repositioned description text

* `animated-image` move description to component

* code style

* `avatar` add summary from docs

* `badge` add summary from docs

* `breadcrumb` add summary from docs

* `button` add summary from docs

* lead sentence is now part of the header

* `button-group` add summary from docs

* `card` add summary from docs

* `checkbox` add summary from docs

* `color-picker` add summary from docs

* `details` add summary from docs

* `dialog` add summary from docs

* `divider` add summary from docs

* `drawer` add summary from docs

* `dropdown` add summary from docs

* `format-bytes` add summary from docs

* `format-date` add summary from docs

* `format-number` add summary from docs

* `icon` add summary from docs

* `icon-button` add summary from docs

* `image-comparer` add summary from docs

* `include` add summary from docs

* `input` add summary from docs

* `menu` add summary from docs

* `menu-item` add summary from docs

* `menu-label` add summary from docs

* `popup` add summary from docs

* `progressbar` add summary from docs

* `progress-ring` add summary from docs

* `radio` add summary from docs

* `radio-button` add summary from docs

* `range` add summary from docs

* `rating` add summary from docs

* `relative-time` add summary from docs

* `select` add summary from docs

* `skeleton` add summary from docs

* `spinner` add summary from docs

* `split-panel` add summary from docs

* `switch` add summary from docs

* `tab-group` add summary from docs

* `tag` add summary from docs

* `textarea` add summary from docs

* `tooltip` add summary from docs

* `visually-hidden` add summary from docs

* `animation` add summary from docs

* `breadcrumb-item` add summary from docs

* `mutation-observer` add summary from docs

* `radio-group` add summary from docs

* `resize-observer` add summary from docs

* `tab` add summary from docs

* `tab-panel` add summary from docs

* `tree` add summary from docs

* `tree-item` add summary from docs

* remove `title` for further usage of `Sl` classnames in docs

* revert: use markdown parser for component summary

2022-10-21 09:56:35 -04:00

3.6 KiB

Raw Blame History

Textarea

[component-header:sl-textarea]

<sl-textarea></sl-textarea>

import { SlTextarea } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlTextarea />;

?> This component works with standard <form> elements. Please refer to the section on form controls to learn more about form submission and client-side validation.

Examples

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>

import { SlTextarea } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlTextarea label="Comments" />;

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>

import { SlTextarea } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlTextarea label="Feedback" help-text="Please tell us what you think." />;

Rows

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

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

import { SlTextarea } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlTextarea rows={2} />;

Placeholders

Use the placeholder attribute to add a placeholder.

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

import { SlTextarea } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlTextarea placeholder="Type something" />;

Filled Textareas

Add the filled attribute to draw a filled textarea.

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

import { SlTextarea } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlTextarea placeholder="Type something" filled />;

Disabled

Use the disabled attribute to disable a textarea.

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

import { SlTextarea } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlTextarea placeholder="Textarea" disabled />;

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>

import { SlTextarea } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <>
    <SlTextarea placeholder="Small" size="small"></SlTextarea>
    <br />
    <SlTextarea placeholder="Medium" size="medium"></SlTextarea>
    <br />
    <SlTextarea placeholder="Large" size="large"></SlTextarea>
  </>
);

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>

import { SlTextarea } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlTextarea resize="none" />;

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>

import { SlTextarea } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlTextarea resize="auto" />;

[component-metadata:sl-textarea]

3.6 KiB Raw Blame History