Radio
Standalone radio button that can be used in any layout.
use radix_yew_themes::{Flex, FlexAlign, FlexChildProps, FlexDirection, Radio, Text, TextAs};
use yew::prelude::*;
#[function_component]
pub fn RadioExample() -> Html {
html! {
<Flex align={FlexAlign::Start} direction={FlexDirection::Column} gap=1>
<Flex
gap=2
as_child={|FlexChildProps { class, style, .. }| html! {
<Text r#as={TextAs::Label} size=2 class={class} style={style}>
<Radio name="example" value="1" default_checked=true />
{"Default"}
</Text>
}}
/>
<Flex
gap=2
as_child={|FlexChildProps { class, style, .. }| html! {
<Text r#as={TextAs::Label} size=2 class={class} style={style}>
<Radio name="example" value="2" />
{"Comfortable"}
</Text>
}}
/>
<Flex
gap=2
as_child={|FlexChildProps { class, style, .. }| html! {
<Text r#as={TextAs::Label} size=2 class={class} style={style}>
<Radio name="example" value="3" />
{"Compact"}
</Text>
}}
/>
</Flex>
}
}
API Reference
This component inherits props from the Radio Group primitive element and supports common margin props.
| Prop | Type | Default |
|---|---|---|
size | Responsive<1..3> | 2 |
variant | RadioVariant | RadioVariant::Surface |
color | Option<AccentColor> | - |
high_contrast | Option<bool> | - |
Examples
Size
Use the size prop to control the radio button size.
use radix_yew_themes::{Flex, FlexAlign, Radio};
use yew::prelude::*;
#[function_component]
pub fn RadioSizeExample() -> Html {
html! {
<Flex align={FlexAlign::Center} gap=4>
<Flex gap=2>
<Radio size=1 name="size-1" value="1" default_checked=true />
<Radio size=1 name="size-1" value="2" />
</Flex>
<Flex gap=2>
<Radio size=2 name="size-2" value="1" default_checked=true />
<Radio size=2 name="size-2" value="2" />
</Flex>
<Flex gap=2>
<Radio size=3 name="size-3" value="1" default_checked=true />
<Radio size=3 name="size-3" value="2" />
</Flex>
</Flex>
}
}
Variant
Use the variant prop to control the visual style of the radio buttons.
use radix_yew_themes::{Flex, FlexAlign, Radio, RadioVariant};
use yew::prelude::*;
#[function_component]
pub fn RadioVariantExample() -> Html {
html! {
<Flex align={FlexAlign::Center} gap=4>
<Flex gap=2>
<Radio variant={RadioVariant::Surface} name="surface" value="1" default_checked=true />
<Radio variant={RadioVariant::Surface} name="surface" value="2" />
</Flex>
<Flex gap=2>
<Radio variant={RadioVariant::Classic} name="classic" value="1" default_checked=true />
<Radio variant={RadioVariant::Classic} name="classic" value="2" />
</Flex>
<Flex gap=2>
<Radio variant={RadioVariant::Soft} name="soft" value="1" default_checked=true />
<Radio variant={RadioVariant::Soft} name="soft" value="2" />
</Flex>
</Flex>
}
}
Color
Use the color prop to assign a specific color.
use radix_yew_themes::{AccentColor, Flex, FlexAs, Radio};
use yew::prelude::*;
#[function_component]
pub fn RadioColorExample() -> Html {
html! {
<Flex r#as={FlexAs::Span} gap=2>
<Radio color={AccentColor::Indigo} default_checked=true />
<Radio color={AccentColor::Cyan} default_checked=true />
<Radio color={AccentColor::Orange} default_checked=true />
<Radio color={AccentColor::Crimson} default_checked=true />
</Flex>
}
}
High-Contrast
Use the high_contrast prop to increase color contrast with the background.
use radix_yew_themes::{AccentColor, Grid, GridDisplay, Radio};
use yew::prelude::*;
#[function_component]
pub fn RadioHighContrastExample() -> Html {
html! {
<Grid columns=5 display={GridDisplay::InlineGrid} gap=2>
<Radio color={AccentColor::Indigo} default_checked=true />
<Radio color={AccentColor::Cyan} default_checked=true />
<Radio color={AccentColor::Orange} default_checked=true />
<Radio color={AccentColor::Crimson} default_checked=true />
<Radio color={AccentColor::Gray} default_checked=true />
<Radio color={AccentColor::Indigo} default_checked=true high_contrast=true />
<Radio color={AccentColor::Cyan} default_checked=true high_contrast=true />
<Radio color={AccentColor::Orange} default_checked=true high_contrast=true />
<Radio color={AccentColor::Crimson} default_checked=true high_contrast=true />
<Radio color={AccentColor::Gray} default_checked=true high_contrast=true />
</Grid>
}
}
Alignment
Composing Radio within Text automatically centers it with the first line of text. It is automatically well-aligned with multi-line text too.
use radix_yew_themes::{Flex, FlexAlign, FlexChildProps, FlexDirection, Radio, Text, TextAs};
use yew::prelude::*;
#[function_component]
pub fn RadioAlignmentExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} gap=3>
<Flex align={FlexAlign::Start} direction={FlexDirection::Column} gap=1>
<Flex
gap=2
as_child={|FlexChildProps { class, style, .. }| html! {
<Text r#as={TextAs::Label} size=2 class={class} style={style}>
<Radio size=1 name="alignment-1" value="1" default_checked=true />
{"Default"}
</Text>
}}
/>
<Flex
gap=2
as_child={|FlexChildProps { class, style, .. }| html! {
<Text r#as={TextAs::Label} size=2 class={class} style={style}>
<Radio size=1 name="alignment-1" value="2" />
{"Compact"}
</Text>
}}
/>
</Flex>
<Flex align={FlexAlign::Start} direction={FlexDirection::Column} gap=1>
<Flex
gap=2
as_child={|FlexChildProps { class, style, .. }| html! {
<Text r#as={TextAs::Label} size=3 class={class} style={style}>
<Radio size=2 name="alignment-2" value="1" default_checked=true />
{"Default"}
</Text>
}}
/>
<Flex
gap=2
as_child={|FlexChildProps { class, style, .. }| html! {
<Text r#as={TextAs::Label} size=3 class={class} style={style}>
<Radio size=2 name="alignment-2" value="2" />
{"Compact"}
</Text>
}}
/>
</Flex>
<Flex align={FlexAlign::Start} direction={FlexDirection::Column} gap=1>
<Flex
gap=2
as_child={|FlexChildProps { class, style, .. }| html! {
<Text r#as={TextAs::Label} size=4 class={class} style={style}>
<Radio size=3 name="alignment-3" value="1" default_checked=true />
{"Default"}
</Text>
}}
/>
<Flex
gap=2
as_child={|FlexChildProps { class, style, .. }| html! {
<Text r#as={TextAs::Label} size=4 class={class} style={style}>
<Radio size=3 name="alignment-3" value="2" />
{"Compact"}
</Text>
}}
/>
</Flex>
</Flex>
}
}
Disabled
Use the native disabled attribute to create a disabled radio button.
use radix_yew_themes::{Flex, FlexAlign, FlexChildProps, FlexDirection, Radio, Text, TextAs};
use yew::prelude::*;
#[function_component]
pub fn RadioDisabledExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} gap=3>
<Flex align={FlexAlign::Start} direction={FlexDirection::Column} gap=1>
<Flex
gap=2
as_child={|FlexChildProps { class, style, .. }| html! {
<Text r#as={TextAs::Label} size=2 class={class} style={style}>
<Radio name="enabled" value="1" default_checked=true />
{"On"}
</Text>
}}
/>
<Flex
gap=2
as_child={|FlexChildProps { class, style, .. }| html! {
<Text r#as={TextAs::Label} size=2 class={class} style={style}>
<Radio name="enabled" value="2" />
{"Off"}
</Text>
}}
/>
</Flex>
<Flex align={FlexAlign::Start} direction={FlexDirection::Column} gap=1>
<Flex
gap=2
as_child={|FlexChildProps { class, style, .. }| html! {
<Text r#as={TextAs::Label} size=2 class={class} style={style}>
<Radio disabled=true name="disabled" value="1" default_checked=true />
{"On"}
</Text>
}}
/>
<Flex
gap=2
as_child={|FlexChildProps { class, style, .. }| html! {
<Text r#as={TextAs::Label} size=2 class={class} style={style}>
<Radio disabled=true name="disabled" value="2" />
{"Off"}
</Text>
}}
/>
</Flex>
</Flex>
}
}