Textarea

Displays a form textarea or a component that looks like a textarea.

use yew::prelude::*;

use crate::components::ui::textarea::Textarea;

#[function_component]
pub fn TextareaDemo() -> Html {
    html! {
        <Textarea placeholder="Type your message here." />
    }
}

use yew::prelude::*;

use crate::components::ui::textarea::Textarea;

#[function_component]
pub fn TextareaDemo() -> Html {
    html! {
        <Textarea placeholder="Type your message here." />
    }
}

Installation

The CLI is not yet available. For now, manually copy the component source into your project.

rust-shadcn-ui add textarea

View source

Usage

use yew::prelude::*;

use crate::components::ui::textarea::Textarea;

#[component]
fn Usage() -> impl IntoView {
    view! {
        <Textarea />
    }
}

Examples

Default

use yew::prelude::*;

use crate::components::ui::textarea::Textarea;

#[function_component]
pub fn TextareaDemo() -> Html {
    html! {
        <Textarea placeholder="Type your message here." />
    }
}

use yew::prelude::*;

use crate::components::ui::textarea::Textarea;

#[function_component]
pub fn TextareaDemo() -> Html {
    html! {
        <Textarea placeholder="Type your message here." />
    }
}

Disabled

use yew::prelude::*;

use crate::components::ui::textarea::Textarea;

#[function_component]
pub fn TextareaDisabled() -> Html {
    html! {
        <Textarea placeholder="Type your message here." disabled=true />
    }
}

use yew::prelude::*;

use crate::components::ui::textarea::Textarea;

#[function_component]
pub fn TextareaDisabled() -> Html {
    html! {
        <Textarea placeholder="Type your message here." disabled=true />
    }
}

With Label

use yew::prelude::*;

use crate::components::ui::{label::Label, textarea::Textarea};

#[function_component]
pub fn TextareaWithLabel() -> Html {
    html! {
        <div class="grid w-full gap-1.5">
            <Label r#for="message">{"Your message"}</Label>
            <Textarea placeholder="Type your message here." id="message" />
        </div>
    }
}

use yew::prelude::*;

use crate::components::ui::{label::Label, textarea::Textarea};

#[function_component]
pub fn TextareaWithLabel() -> Html {
    html! {
        <div class="grid w-full gap-1.5">
            <Label r#for="message">{"Your message"}</Label>
            <Textarea placeholder="Type your message here." id="message" />
        </div>
    }
}

With Text

use yew::prelude::*;

use crate::components::ui::{label::Label, textarea::Textarea};

#[function_component]
pub fn TextareaWithText() -> Html {
    html! {
        <div class="grid w-full gap-1.5">
            <Label r#for="message-2">{"Your Message"}</Label>
            <Textarea placeholder="Type your message here." id="message-2" />
            <p class="text-sm text-muted-foreground">
                {"Your message will be copied to the support team."}
            </p>
        </div>
    }
}

use yew::prelude::*;

use crate::components::ui::{label::Label, textarea::Textarea};

#[function_component]
pub fn TextareaWithText() -> Html {
    html! {
        <div class="grid w-full gap-1.5">
            <Label r#for="message-2">{"Your Message"}</Label>
            <Textarea placeholder="Type your message here." id="message-2" />
            <p class="text-sm text-muted-foreground">
                {"Your message will be copied to the support team."}
            </p>
        </div>
    }
}

With Button

use yew::prelude::*;

use crate::components::ui::{button::Button, textarea::Textarea};

#[function_component]
pub fn TextareaWithButton() -> Html {
    html! {
        <div class="grid w-full gap-2">
            <Textarea placeholder="Type your message here." />
            <Button>{"Send message"}</Button>
        </div>
    }
}

use yew::prelude::*;

use crate::components::ui::{button::Button, textarea::Textarea};

#[function_component]
pub fn TextareaWithButton() -> Html {
    html! {
        <div class="grid w-full gap-2">
            <Textarea placeholder="Type your message here." />
            <Button>{"Send message"}</Button>
        </div>
    }
}

Form

use yew::prelude::*;

// use crate::components::ui::textarea::Textarea;

#[function_component]
pub fn TextareaForm() -> Html {
    html! {
        // TODO
    }
}

use yew::prelude::*;

// use crate::components::ui::textarea::Textarea;

#[function_component]
pub fn TextareaForm() -> Html {
    html! {
        // TODO
    }
}

Rust shadcn/ui

Textarea

Installation

Usage

Examples

Default

Disabled

With Label

With Text

With Button

Form

See Also