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.

PropTypeDefault
sizeResponsive<1..3>2
variantTextFieldVariantTextFieldVariant::Surface
resizeResponsive<TextAreaResize>-
colorOption<AccentColor>-
radiusOption<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>
    }
}

See Also