Component
textarea
dx components add textareaa textarea component used to allow users to enter multi-line text input
Description here: sample text
Installation
Use the CLI command for the common path, or copy the component files manually.
Manual installation files
Copy the component source and CSS into your app. Import the shared theme CSS once near your app root.
use dioxus::prelude::*;
#[derive(Copy, Clone, PartialEq, Default)]
#[non_exhaustive]
pub enum TextareaVariant {
#[default]
Default,
Fade,
Outline,
Ghost,
}
impl TextareaVariant {
pub fn class(&self) -> &'static str {
match self {
TextareaVariant::Default => "default",
TextareaVariant::Fade => "fade",
TextareaVariant::Outline => "outline",
TextareaVariant::Ghost => "ghost",
}
}
}
#[component]
pub fn Textarea(
oninput: Option<EventHandler<FormEvent>>,
onchange: Option<EventHandler<FormEvent>>,
oninvalid: Option<EventHandler<FormEvent>>,
onselect: Option<EventHandler<SelectionEvent>>,
onselectionchange: Option<EventHandler<SelectionEvent>>,
onfocus: Option<EventHandler<FocusEvent>>,
onblur: Option<EventHandler<FocusEvent>>,
onfocusin: Option<EventHandler<FocusEvent>>,
onfocusout: Option<EventHandler<FocusEvent>>,
onkeydown: Option<EventHandler<KeyboardEvent>>,
onkeypress: Option<EventHandler<KeyboardEvent>>,
onkeyup: Option<EventHandler<KeyboardEvent>>,
oncompositionstart: Option<EventHandler<CompositionEvent>>,
oncompositionupdate: Option<EventHandler<CompositionEvent>>,
oncompositionend: Option<EventHandler<CompositionEvent>>,
oncopy: Option<EventHandler<ClipboardEvent>>,
oncut: Option<EventHandler<ClipboardEvent>>,
onpaste: Option<EventHandler<ClipboardEvent>>,
onmounted: Option<EventHandler<MountedEvent>>,
#[props(default)] variant: TextareaVariant,
#[props(extends=GlobalAttributes)]
#[props(extends=textarea)]
attributes: Vec<Attribute>,
) -> Element {
rsx! {
document::Link { rel: "stylesheet", href: asset!("/src/components/textarea/style.css") }
textarea {
class: "dx-textarea",
"data-slot": "textarea",
"data-style": variant.class(),
oninput: move |e| _ = oninput.map(|callback| callback(e)),
onchange: move |e| _ = onchange.map(|callback| callback(e)),
oninvalid: move |e| _ = oninvalid.map(|callback| callback(e)),
onselect: move |e| _ = onselect.map(|callback| callback(e)),
onselectionchange: move |e| _ = onselectionchange.map(|callback| callback(e)),
onfocus: move |e| _ = onfocus.map(|callback| callback(e)),
onblur: move |e| _ = onblur.map(|callback| callback(e)),
onfocusin: move |e| _ = onfocusin.map(|callback| callback(e)),
onfocusout: move |e| _ = onfocusout.map(|callback| callback(e)),
onkeydown: move |e| _ = onkeydown.map(|callback| callback(e)),
onkeypress: move |e| _ = onkeypress.map(|callback| callback(e)),
onkeyup: move |e| _ = onkeyup.map(|callback| callback(e)),
oncompositionstart: move |e| _ = oncompositionstart.map(|callback| callback(e)),
oncompositionupdate: move |e| _ = oncompositionupdate.map(|callback| callback(e)),
oncompositionend: move |e| _ = oncompositionend.map(|callback| callback(e)),
oncopy: move |e| _ = oncopy.map(|callback| callback(e)),
oncut: move |e| _ = oncut.map(|callback| callback(e)),
onpaste: move |e| _ = onpaste.map(|callback| callback(e)),
onmounted: move |e| _ = onmounted.map(|callback| callback(e)),
..attributes,
}
}
}Usage notes
The textarea element is used to allow users to enter multi-line text input in a user interface.
Component Structure
textarea {
// Global html attributes
class: "dx-textarea",
"data-style": "default",
// Children
{children}
}Variants
Alternative examples for common configurations.
outline
Description here: sample text
fade
Description here: sample text
ghost
Description here: sample text