Text field

A text field with its label, and where given, a description and an error message tied to it.

Result

text_field.rs

use hypersig::html::div;
use hypersig::style::pattern::stack;
use hypersig::style::value::rem;
use hypersig::{Page, Signals, if_else};
use hypersig_ui::{Autocomplete, InputKind, NumberField, TextField};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
pub struct Signup {
    email: String,
    bio: String,
    guests: i32,
}

pub fn page() -> Page<Signup> {
    let email = Signup::email();
    let looks_wrong = !email.is_empty().or(email.contains("@"));
    let initial = Signup {
        email: String::new(),
        bio: String::new(),
        guests: 1,
    };
    Page::new(
        "Sign up",
        initial,
    )
    .child(
        div()
            .css(stack(rem(1.25)).max_width(rem(24)))
            .child(
                TextField::new(
                    "Email",
                    email,
                )
                .kind(InputKind::Email)
                .autocomplete(Autocomplete::Email)
                .placeholder("ada@example.com")
                .description("We send the receipt here.")
                .error(if_else(
                    looks_wrong,
                    "Enter an email address.",
                    "",
                ))
                .required(),
            )
            .child(
                TextField::new(
                    "Bio",
                    Signup::bio(),
                )
                .multiline()
                .description("A sentence or two for your profile."),
            )
            .child(
                NumberField::new(
                    "Guests",
                    Signup::guests(),
                )
                .min(1)
                .max(10)
                .description("Up to 10 people."),
            ),

    )
}

Accessibility

A text field is a <label> and an <input>, or a <textarea> in place of the <input> with multiline. The ids that tie the label to the input are derived from the signal's path, so a label always names its own field. aria-describedby points at the description and the error, and aria-invalid is true while the error is not empty.

The error sits in an aria-live="polite" region, so a screen reader reads a new message when it appears. A screen reader reads "required" from the field itself, so it skips the asterisk that a required field shows. autocomplete tells the browser what the field holds, to meet WCAG 1.3.5.

NumberField is an <input type="number"> bound to an i32 or f64 signal, with the same label, ids, and messages. Its min, max, and step take the signal's own type. A field whose minimum is 0 or more asks for a keyboard of digits.

API

Item	Summary
`TextField::new`	A single-line text field labeled `label`, bound to `value`.
`TextField::in_form`	A single-line text field labeled `label`, bound to `field` of `form`.
`kind`	Sets the `type` of the input. A multiline field ignores it.
`multiline`	Makes the field a `<textarea>` that the visitor can resize vertically.
`autocomplete`	Tells the browser what the field holds, so that it can fill it in.
`input_mode`	Asks for the on-screen keyboard `mode`, as `inputmode` does.
`max_length`	Stops the visitor from typing more than `count` characters, as `maxlength` does.
`min_length`	Makes the browser refuse to submit fewer than `count` characters, as `minlength` does.
`placeholder`	Shows `text` in the empty field.
`description`	Adds a line under the field that `aria-describedby` points at.
`error`	Shows `message` under the field and marks the field invalid while `message` is not empty.
`required`	Marks the field `required`, which the label shows with an asterisk.
`disabled`	Disables the field while `when` is true.
`InputKind`	The `type` of a single-line `TextField`.
`InputMode`	The on-screen keyboard a `TextField` asks for, as `inputmode` names it.
`NumberField::new`	A number field labeled `label`, bound to `value`.
`NumberField::in_form`	A number field labeled `label`, bound to `field` of `form`.
`min`	Sets the lowest value the browser accepts.
`max`	Sets the highest value the browser accepts.
`step`	Sets how far the arrow keys move the value, and which values the browser accepts.
`Numeric`	A number type a `NumberField` can be bound to: `i32` or `f64`.
`Autocomplete`	What a `TextField` holds, as `autocomplete` names it.