Text Area
Captures multi-line user input.
use radix_yew_themes::TextArea;
use yew::prelude::*;
#[function_component]
pub fn TextAreaExample() -> Html {
html! {
<TextArea placeholder="Reply to comment…" />
}
}
API Reference
This component is based on the textarea
element and supports common margin props.
Prop | Type | Default |
---|---|---|
size | Responsive<1..3> | 2 |
variant | TextFieldVariant | TextFieldVariant::Surface |
resize | Responsive<TextAreaResize> | - |
color | Option<AccentColor> | - |
radius | Option<Radius> | - |
Examples
Size
Use the size
prop to control the size.
use radix_yew_themes::{Box, Flex, FlexDirection, TextArea};
use yew::prelude::*;
#[function_component]
pub fn TextAreaSizeExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} gap=3>
<Box max_width="200px">
<TextArea size=1 placeholder="Reply to comment…" />
</Box>
<Box max_width="250px">
<TextArea size=2 placeholder="Reply to comment…" />
</Box>
<Box max_width="300px">
<TextArea size=3 placeholder="Reply to comment…" />
</Box>
</Flex>
}
}
Variant
Use the variant
prop to control the visual style.
use radix_yew_themes::{Flex, FlexDirection, TextArea, TextAreaVariant};
use yew::prelude::*;
#[function_component]
pub fn TextAreaVariantExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} gap=3 max_width="250px">
<TextArea variant={TextAreaVariant::Surface} placeholder="Reply to comment…" />
<TextArea variant={TextAreaVariant::Classic} placeholder="Reply to comment…" />
<TextArea variant={TextAreaVariant::Soft} placeholder="Reply to comment…" />
</Flex>
}
}
Color
Use the color
prop to assign a specific color.
use radix_yew_themes::{AccentColor, Flex, FlexDirection, TextArea, TextAreaVariant};
use yew::prelude::*;
#[function_component]
pub fn TextAreaColorExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} gap=3 max_width="250px">
<TextArea color={AccentColor::Indigo} variant={TextAreaVariant::Soft} placeholder="Reply to comment…" />
<TextArea color={AccentColor::Green} variant={TextAreaVariant::Soft} placeholder="Reply to comment…" />
<TextArea color={AccentColor::Red} variant={TextAreaVariant::Soft} placeholder="Reply to comment…" />
</Flex>
}
}
Radius
Use the radius
prop to assign a specific radius value.
use radix_yew_themes::{Flex, FlexDirection, Radius, TextArea};
use yew::prelude::*;
#[function_component]
pub fn TextAreaRadiusExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} gap=3 max_width="250px">
<TextArea radius={Radius::None} placeholder="Reply to comment…" />
<TextArea radius={Radius::Large} placeholder="Reply to comment…" />
<TextArea radius={Radius::Full} placeholder="Reply to comment…" />
</Flex>
}
}
Radius
Use the resize
prop to enable resizing on one or both axis.
use radix_yew_themes::{Flex, FlexDirection, TextArea, TextAreaResize};
use yew::prelude::*;
#[function_component]
pub fn TextAreaResizeExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} gap=3 max_width="250px">
<TextArea resize={TextAreaResize::None} placeholder="Reply to comment…" />
<TextArea resize={TextAreaResize::Vertical} placeholder="Reply to comment…" />
<TextArea resize={TextAreaResize::Horizontal} placeholder="Reply to comment…" />
<TextArea resize={TextAreaResize::Both} placeholder="Reply to comment…" />
</Flex>
}
}