Struct FieldProps 

pub struct FieldProps {

    pub id: &'static str,
    pub name: &'static str,
    pub type: &'static str,
    pub label: &'static str,
    pub placeholder: &'static str,
    pub helper_text: &'static str,
    pub validation_state: ValidationState,
    pub required: bool,
    pub disabled: bool,
    pub full_width: bool,
    pub variant: Variant,
    pub color: Color,
    pub size: Size,
    pub pattern: &'static str,
    pub maxlength: Option<usize>,
    pub minlength: Option<usize>,
    pub class: &'static str,
    pub style: &'static str,
    pub handle: RwSignal<String>,
    pub valid_handle: RwSignal<bool>,
    pub validate_function: fn(String) -> bool,
    pub data_testid: &'static str,
}

Available on crate feature lep only.

Props for the Field component.

A convenience composition of Control, FormLabel, Input, and Helper into a single validated form field for Leptos.

Uses input-rs for the underlying <input> element with HTML5 validation.

Examples

use form_rs::leptos::Field;
use leptos::prelude::*;

#[component]
pub fn EmailInput() -> impl IntoView {
    let handle = RwSignal::new(String::new());
    let valid = RwSignal::new(true);
    view! {
        <Field
            id="email"
            name="email"
            r#type="email"
            label="Email address"
            placeholder="ferris@opensass.org"
            required=true
            handle=handle
            valid_handle=valid
            validate_function=|v: String| !v.is_empty() && v.contains('@')
        />
    }
}

Required Props

• id: [&'static str]
  • The unique id for the <input> element.
• handle: RwSignal<String>
  • Controlled value signal.
• valid_handle: RwSignal<bool>
  • Validity signal.
• validate_function: [fn(String) -> bool]
  • Validation function.

Optional Props

• name: [&'static str]
  • The name attribute for the <input>.
• r#type: [&'static str]
  • The input type.
• label: [&'static str]
  • Label text displayed above the input.
• placeholder: [&'static str]
  • Placeholder text.
• helper_text: [&'static str]
  • Helper text below the input.
• validation_state: ValidationState
  • Validation state.
• required: bool
  • Whether the field is required.
• disabled: bool
  • Whether the field is disabled.
• full_width: bool
  • Whether the field takes the full container width.
• variant: Variant
  • Visual variant.
• color: Color
  • Color theme.
• size: Size
  • Size.
• pattern: [&'static str]
  • HTML5 pattern for native regex validation.
• maxlength: usize
  • Max character count.
• minlength: usize
  • Min character count.
• class: [&'static str]
  • Outer <div> CSS class.
• style: [&'static str]
  • Outer <div> inline CSS.
• data_testid: [&'static str]
  • data-testid for automated testing.

Fields

id: &'static str

The unique id for the <input> element.

name: &'static str

The name attribute for the <input>.

type: &'static str

The input type.

label: &'static str

Label text displayed above the input.

placeholder: &'static str

Placeholder text.

helper_text: &'static str

Helper text below the input.

validation_state: ValidationState

Validation state.

required: bool

Whether the field is required.

disabled: bool

Whether the field is disabled.

full_width: bool

Whether the field takes the full container width.

variant: Variant

Visual variant.

color: Color

Color theme.

size: Size

Size.

pattern: &'static str

HTML5 pattern for native regex validation.

maxlength: Option<usize>

Max character count.

minlength: Option<usize>

Min character count.

class: &'static str

Outer <div> CSS class.

style: &'static str

Outer <div> inline CSS.

handle: RwSignal<String>

Controlled value signal.

valid_handle: RwSignal<bool>

Validity signal.

validate_function: fn(String) -> bool

Validation function.

data_testid: &'static str

data-testid for automated testing.

Implementations

impl FieldProps

pub fn builder() -> FieldPropsBuilder<((), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), ())>

Create a builder for building FieldProps. On the builder, call .id(...), .name(...)(optional), .r#type(...)(optional), .label(...)(optional), .placeholder(...)(optional), .helper_text(...)(optional), .validation_state(...)(optional), .required(...)(optional), .disabled(...)(optional), .full_width(...)(optional), .variant(...)(optional), .color(...)(optional), .size(...)(optional), .pattern(...)(optional), .maxlength(...)(optional), .minlength(...)(optional), .class(...)(optional), .style(...)(optional), .handle(...), .valid_handle(...), .validate_function(...), .data_testid(...)(optional) to set the values of the fields. Finally, call .build() to create the instance of FieldProps.

Trait Implementations

impl Props for FieldProps

type Builder = FieldPropsBuilder

fn builder() -> Self::Builder