steid
Sign in

@jamesgill /

steid

steid/src/components/textarea.rs
1.5 KBCode·Blame·Raw
1use topcoat::{
2 Result,
3 view::{Attributes, View, class, component, view},
4};
5
6/// The classes for the [`textarea`] control.
7///
8/// The text size, radius, shadow, and focus ring match the input control.
9/// `field-sizing-content` lets the control grow with its content, from the
10/// two-line minimum height; browsers without support keep the fixed minimum
11/// and scroll.
12const TEXTAREA: &str = "field-sizing-content min-h-16 w-full rounded-lg border border-border \
13 bg-background px-3 py-2 text-sm shadow-xs transition-colors outline-none \
14 placeholder:text-muted-foreground \
15 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 \
16 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50";
17
18/// A multi-line text input component.
19///
20/// The `attrs` (such as `name`, `placeholder`, `rows`, `disabled`, or event
21/// handlers) are forwarded to the underlying `<textarea>`; a `class` among
22/// them is appended to the computed classes. Child nodes become the control's
23/// initial value. The textarea fills its container, so size it through the
24/// container or with a width class; it grows with its content from a
25/// two-line minimum.
26///
27/// ```ignore
28/// view! {
29/// textarea(attrs: attributes! { name="feedback" placeholder="Tell us more" })
30/// }
31/// ```
32#[component]
33pub async fn textarea(#[default] mut attrs: Attributes, #[default] child: View) -> Result {
34 view! {
35 <textarea class=(class!(TEXTAREA, attrs.remove("class"))) (attrs)>
36 (child)
37 </textarea>
38 }
39}