Text Field

Captures user input with an optional slot for buttons and icons.

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::{TextField, TextFieldSlot};
use yew::prelude::*;

#[function_component]
pub fn TextFieldExample() -> Html {
    html! {
        <TextField placeholder="Search the docs…">
            <TextFieldSlot>
                <MagnifyingGlassIcon height="16" width="16" />
            </TextFieldSlot>
        </TextField>
    }
}

API Reference

Root

Groups Slot and Input parts. This component is based on the input element and supports common margin props.

Prop	Type	Default
`size`	`Responsive<1..3>`	`2`
`variant`	`TextFieldVariant`	`TextFieldVariant::Surface`
`color`	`Option<AccentColor>`	-
`radius`	`Option<Radius>`	-

Slot

Contains icons or buttons associated with an Input.

Prop	Type	Default
`side`	`Option<TextFieldSlotSide>`	-
`color`	`Option<AccentColor>`	-
`gap`	`Option<Responsive<0..9>>`	-
`px`	`Option<Responsive<0..9>>`	-
`pl`	`Option<Responsive<0..9>>`	-
`pr`	`Option<Responsive<0..9>>`	-

Examples

Size

Use the size prop to control the size.

use radix_yew_themes::{Box, Flex, FlexDirection, TextField};
use yew::prelude::*;

#[function_component]
pub fn TextFieldSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Box max_width="200px">
                <TextField size=1 placeholder="Search the docs…" />
            </Box>
            <Box max_width="250px">
                <TextField size=2 placeholder="Search the docs…" />
            </Box>
            <Box max_width="300px">
                <TextField size=3 placeholder="Search the docs…" />
            </Box>
        </Flex>
    }
}

Use matching component sizes when composing Text Field with buttons. However, don't use size 1 inputs with buttons - at this size, there is not enough vertical space to nest other interactive elements.

use radix_yew_icons::{DotsHorizontalIcon, MagnifyingGlassIcon};
use radix_yew_themes::{
    Box, Flex, FlexDirection, IconButton, IconButtonVariant, TextField, TextFieldSlot,
};
use yew::prelude::*;

#[function_component]
pub fn TextFieldSizeButtonsExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3 max_width="400px">
            <Box max_width="200px">
                <TextField placeholder="Search the docs…" size=1>
                    <TextFieldSlot>
                        <MagnifyingGlassIcon height="16" width="16" />
                    </TextFieldSlot>
                </TextField>
            </Box>

            <Box max_width="250px">
                <TextField placeholder="Search the docs…" size=2>
                    <TextFieldSlot>
                        <MagnifyingGlassIcon height="16" width="16" />
                    </TextFieldSlot>
                    <TextFieldSlot>
                        <IconButton size=1 variant={IconButtonVariant::Ghost}>
                            <DotsHorizontalIcon height="14" width="14" />
                        </IconButton>
                    </TextFieldSlot>
                </TextField>
            </Box>

            <Box max_width="300px">
                <TextField placeholder="Search the docs…" size=3>
                    <TextFieldSlot>
                        <MagnifyingGlassIcon height="16" width="16" />
                    </TextFieldSlot>
                    <TextFieldSlot pr=3>
                        <IconButton size=2 variant={IconButtonVariant::Ghost}>
                            <DotsHorizontalIcon height="16" width="16" />
                        </IconButton>
                    </TextFieldSlot>
                </TextField>
            </Box>
        </Flex>
    }
}

Variant

Use the variant prop to control the visual style.

use radix_yew_themes::{Flex, FlexDirection, TextField, TextFieldVariant};
use yew::prelude::*;

#[function_component]
pub fn TextFieldVariantExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3 max_width="250px">
            <TextField variant={TextFieldVariant::Surface} placeholder="Search the docs…" />
            <TextField variant={TextFieldVariant::Classic} placeholder="Search the docs…" />
            <TextField variant={TextFieldVariant::Soft} placeholder="Search the docs…" />
        </Flex>
    }
}

Color

Use the color prop to assign a specific color.

use radix_yew_themes::{AccentColor, Flex, FlexDirection, TextField, TextFieldVariant};
use yew::prelude::*;

#[function_component]
pub fn TextFieldColorExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3 max_width="250px">
            <TextField color={AccentColor::Indigo} variant={TextFieldVariant::Soft} placeholder="Search the docs…" />
            <TextField color={AccentColor::Green} variant={TextFieldVariant::Soft} placeholder="Search the docs…" />
            <TextField color={AccentColor::Red} variant={TextFieldVariant::Soft} placeholder="Search the docs…" />
        </Flex>
    }
}

Radius

Use the radius prop to assign a specific radius value.

use radix_yew_themes::{Flex, FlexDirection, Radius, TextField};
use yew::prelude::*;

#[function_component]
pub fn TextFieldRadiusExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3 max_width="250px">
            <TextField radius={Radius::None} placeholder="Search the docs…" />
            <TextField radius={Radius::Large} placeholder="Search the docs…" />
            <TextField radius={Radius::Full} placeholder="Search the docs…" />
        </Flex>
    }
}

Rust Radix