Edit Component

Y Form RS Yew Usage

Adding Form RS to your project is simple:

1. Make sure your project is set up with Yew. Follow their Getting Started Guide for setup instructions.

2. Add the Form RS component to your dependencies by including it in your Cargo.toml file:

   cargo add form-rs --features=yew
   

3. Import the form components into your Yew component and start using them in your app.

🛠️ Usage

Basic Login Form

use form_rs::yew::{Form, Control, FormLabel, Helper, Field};
use form_rs::{Method, ValidationState};
use yew::prelude::*;

#[function_component(LoginForm)]
pub fn login_form() -> Html {
    let email = use_state(String::new);
    let email_valid = use_state(|| true);

    html! {
        <Form method={Method::Post}>
            <Field
                id="email"
                label="Email"
                r#type="email"
                placeholder="ferris@opensass.org"
                helper_text="Enter a valid email."
                required={true}
                full_width={true}
                handle={email.clone()}
                valid_handle={email_valid.clone()}
                validate_function={Callback::from(|v: String| v.contains('@') && v.contains('.'))}
            />
        </Form>
    }
}

ARIA Validation with Helper Text

use form_rs::yew::{Form, Field};
use form_rs::{ValidationState};
use yew::prelude::*;

#[function_component(AriaForm)]
pub fn aria_form() -> Html {
    let val = use_state(String::new);
    let valid = use_state(|| true);

    html! {
        <Form>
            <Field
                id="username"
                label="Username"
                r#type="text"
                helper_text="3-20 characters."
                validation_state={ValidationState::Invalid("Too short".into())}
                handle={val.clone()}
                valid_handle={valid.clone()}
                validate_function={Callback::from(|v: String| v.len() >= 3)}
            />
        </Form>
    }
}

Group with Checkboxes

use form_rs::yew::{Form, Group, ControlLabel};
use form_rs::LabelPlacement;
use yew::prelude::*;

#[function_component(CheckboxGroup)]
pub fn checkbox_group() -> Html {
    html! {
        <Form>
            <Group>
                <ControlLabel
                    label="Email notifications"
                    label_placement={LabelPlacement::End}
                    control={html! { <input type="checkbox" /> }}
                />
                <ControlLabel
                    label="SMS notifications"
                    label_placement={LabelPlacement::End}
                    control={html! { <input type="checkbox" /> }}
                />
            </Group>
        </Form>
    }
}

🔧 Props

Form

Control

Field

FormLabel

Helper

Group

ControlLabel

💡 Notes

• Field is a convenience composition of Control + FormLabel + Input + Helper. Use it for the common case.
• Use Control + FormLabel + Helper manually when you need full layout control.
• Set validation_state={ValidationState::Invalid("message".into())} to show server-side errors.
• All components are WCAG 2.2 AA compliant, aria-describedby, aria-required, and aria-invalid are wired automatically.

🔗 See Also

• Input RS: The unstyled <input> abstraction layer powering Field.
• MDN <form> element: Full reference for HTML form attributes and behavior.
• MDN <input> element: Full reference for input types, validation attributes, and events.
• WCAG 2.2: Form Labels: Accessibility guidance for labeling form controls.
• WCAG 2.2: Error Identification: Accessibility guidance for surfacing validation errors.

Usage

CLI Usage

You can import Form RS directly into your project to customize and modify it using the opensass cli:

os add form-rs yew

use form_rs::dioxus::{Form, Field};
use form_rs::{Method, ValidationState};
use dioxus::prelude::*;

fn validate_email(v: String) -> bool {
    !v.is_empty() && v.contains('@') && v.contains('.')
}

#[component]
fn LoginForm() -> Element {
    let email = use_signal(String::new);
    let email_valid = use_signal(|| true);

    rsx! {
        Form { method: Method::Post,
            Field {
                id: "email",
                label: "Email",
                r#type: "email",
                placeholder: "ferris@opensass.org",
                helper_text: "Enter a valid email.",
                required: true,
                full_width: true,
                handle: email,
                valid_handle: email_valid,
                validate_function: validate_email,
            }
        }
    }
}

use form_rs::dioxus::{Form, Field};
use form_rs::ValidationState;
use dioxus::prelude::*;

fn validate_username(v: String) -> bool { v.len() >= 3 }

#[component]
fn AriaForm() -> Element {
    let val = use_signal(String::new);
    let valid = use_signal(|| true);

    rsx! {
        Form {
            Field {
                id: "username",
                label: "Username",
                r#type: "text",
                helper_text: "3-20 characters.",
                validation_state: ValidationState::Invalid("Too short".into()),
                handle: val,
                valid_handle: valid,
                validate_function: validate_username,
            }
        }
    }
}

use form_rs::dioxus::{Form, Group, ControlLabel};
use form_rs::LabelPlacement;
use dioxus::prelude::*;

#[component]
fn CheckboxGroup() -> Element {
    rsx! {
        Form {
            Group {
                ControlLabel {
                    control: rsx! { input { r#type: "checkbox" } },
                    label: Some(rsx! { span { "Email notifications" } }),
                    label_placement: LabelPlacement::End,
                }
                ControlLabel {
                    control: rsx! { input { r#type: "checkbox" } },
                    label: Some(rsx! { span { "SMS notifications" } }),
                    label_placement: LabelPlacement::End,
                }
            }
        }
    }
}

os add form-rs dio

use form_rs::leptos::{Form, Field};
use form_rs::{Method, ValidationState};
use leptos::prelude::*;

fn validate_email(v: String) -> bool {
    !v.is_empty() && v.contains('@') && v.contains('.')
}

#[component]
pub fn LoginForm() -> impl IntoView {
    let email = RwSignal::new(String::new());
    let email_valid = RwSignal::new(true);

    view! {
        <Form method=Method::Post>
            <Field
                id="email"
                label="Email"
                r#type="email"
                placeholder="ferris@opensass.org"
                helper_text="Enter a valid email."
                required=true
                full_width=true
                handle=email
                valid_handle=email_valid
                validate_function=validate_email
            />
        </Form>
    }
}

use form_rs::leptos::{Form, Field};
use form_rs::ValidationState;
use leptos::prelude::*;

fn validate_username(v: String) -> bool { v.len() >= 3 }

#[component]
pub fn AriaForm() -> impl IntoView {
    let val = RwSignal::new(String::new());
    let valid = RwSignal::new(true);

    view! {
        <Form>
            <Field
                id="username"
                label="Username"
                r#type="text"
                helper_text="3-20 characters."
                validation_state=ValidationState::Invalid("Too short".into())
                handle=val
                valid_handle=valid
                validate_function=validate_username
            />
        </Form>
    }
}

use form_rs::leptos::{Form, Group, ControlLabel};
use form_rs::LabelPlacement;
use leptos::prelude::*;

#[component]
pub fn CheckboxGroup() -> impl IntoView {
    view! {
        <Form>
            <Group>
                <ControlLabel
                    control=view! { <input type="checkbox" /> }.into_any()
                    label=view! { <span>"Email notifications"</span> }.into_any()
                    label_placement=LabelPlacement::End
                />
                <ControlLabel
                    control=view! { <input type="checkbox" /> }.into_any()
                    label=view! { <span>"SMS notifications"</span> }.into_any()
                    label_placement=LabelPlacement::End
                />
            </Group>
        </Form>
    }
}

os add form-rs lep