Textarea
Displays a form textarea.
use leptos::prelude::*; use singlestage::*; #[component] pub fn TextareaExample() -> impl IntoView { view! { <div class="w-xs"> <Textarea placeholder="Type your message here" /> </div> } }
Field
Enter your message below.
use leptos::prelude::*; use singlestage::*; #[component] pub fn TextareaFieldExample() -> impl IntoView { view! { <Field class="max-w-xs"> <Label label_for="textarea-message">"Message"</Label> <FieldDescription>"Enter your message below."</FieldDescription> <Textarea id="textarea-message" placeholder="Type your message here." /> </Field> } }
Disabled
use leptos::prelude::*; use singlestage::*; #[component] pub fn TextareaDisabledExample() -> impl IntoView { view! { <Field class="max-w-xs" disabled=true> <Textarea placeholder="Type your message here.">"Message"</Textarea> </Field> } }
Invalid
Please enter a valid message.
use leptos::prelude::*; use singlestage::*; #[component] pub fn TextareaInvalidExample() -> impl IntoView { view! { <Field class="max-w-xs" invalid=true> <Textarea placeholder="Type your message here.">"Message"</Textarea> <FieldDescription>"Please enter a valid message."</FieldDescription> </Field> } }
Button
use leptos::prelude::*; use singlestage::*; #[component] pub fn TextareaButtonExample() -> impl IntoView { view! { <div class="grid w-xs gap-2"> <Textarea placeholder="Type your message here." /> <Button>"Send message"</Button> </div> } }
Anatomy
Import all parts and piece them together.
use leptos::prelude::*; use singlestage::Textarea; #[component] pub fn TextareaAnatomy() -> impl IntoView { view! { <Textarea /> } }
API Reference
Textarea
Creates a textarea that takes children as a default value.
| Name | Type | Default | Description |
|---|---|---|---|
| default | String | "" | Sets the default value of the element. Setting `value` sets this once at page load. |
| disabled | bool | false | Toggles whether or not the textarea is disabled. |
| invalid | bool | false | Toggles invalid appearance. |
| value | String | "" | Reactive signal coupled to the value of the textarea. |