Struct TextField 

pub struct TextField<S> { /* private fields */ }

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

The ids that tie them together 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.

Two fields bound to the same signal on one page get the same ids, and the second field’s label and messages then point at the first field, so bind each field to its own signal.

use hypersig::{Signals, if_else};
use hypersig_ui::{Autocomplete, InputKind, TextField};
use serde::{Deserialize, Serialize};

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

let email = Signup::email();
let field = TextField::new("Email", email)
    .kind(InputKind::Email)
    .autocomplete(Autocomplete::Email)
    .description("We send the receipt here.")
    .error(if_else(email.contains("@").or(email.is_empty()), "", "Enter an email address."))
    .required();
let html = field.render().render();
assert!(html.contains(r#"for="ui-email-input""#));
assert!(html.contains(r#"aria-describedby="ui-email-description ui-email-error""#));

Implementations

impl<S> TextField<S>

pub fn new(label: impl Into<String>, value: Sig<S, String>) -> Self

A single-line text field labeled label, bound to value.

pub fn in_form<T: Validate>( label: impl Into<String>, form: Sig<S, Form<T>>, field: Sig<T, String>, ) -> Self

A single-line text field labeled label, bound to field of form.

It shows error of the form for field and marks the field touched when the visitor leaves it, so a rule’s message waits until the visitor has finished typing.

use hypersig::{Form, Rules, Sig, Signals, Validate};
use hypersig_ui::TextField;
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize, Clone)]
struct Signup {
    email: String,
}

impl Validate for Signup {
    fn rules<S>(form: Sig<S, Self>, rules: &mut Rules<S, Self>) {
        let email = form.at(Signup::email());
        rules.check(Signup::email(), email.contains("@"), "Enter an email address.");
    }
}

#[derive(Signals, Serialize, Deserialize)]
struct Join {
    signup: Form<Signup>,
}

let html = TextField::in_form("Email", Join::signup(), Signup::email()).render().render();
assert!(html.contains("signup.touched.email"));

pub fn kind(self, kind: InputKind) -> Self

Sets the type of the input. A multiline field ignores it.

pub fn multiline(self) -> Self

Makes the field a <textarea> that the visitor can resize vertically.

pub fn autocomplete(self, autocomplete: Autocomplete) -> Self

Tells the browser what the field holds, so that it can fill it in.

pub fn input_mode(self, mode: InputMode) -> Self

Asks for the on-screen keyboard mode, as inputmode does.

use hypersig::Signals;
use hypersig_ui::{Autocomplete, InputMode, TextField};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
struct Login {
    code: String,
}

let code = TextField::new("Code", Login::code())
    .input_mode(InputMode::Numeric)
    .autocomplete(Autocomplete::OneTimeCode)
    .max_length(6);
let html = code.render().render();
assert!(html.contains(r#"inputmode="numeric""#));
assert!(html.contains(r#"maxlength="6""#));

pub fn max_length(self, count: u32) -> Self

Stops the visitor from typing more than count characters, as maxlength does.

pub fn min_length(self, count: u32) -> Self

Makes the browser refuse to submit fewer than count characters, as minlength does.

An empty field passes unless it is required.

pub fn placeholder(self, text: impl Into<String>) -> Self

Shows text in the empty field.

A placeholder disappears as the visitor types, so the label and the description carry what the visitor needs to keep.

pub fn description(self, text: impl Into<String>) -> Self

Adds a line under the field that aria-describedby points at.

pub fn error(self, message: impl IntoExpr<S, String>) -> Self

Shows message under the field and marks the field invalid while message is not empty.

A signal that an action call fills with Call::error works here, as does an expression that checks the value in the browser.

pub fn required(self) -> Self

Marks the field required, which the label shows with an asterisk that a screen reader skips, since it reads “required” from the field.

pub fn disabled(self, when: impl IntoExpr<S, bool>) -> Self

Disables the field while when is true.

pub fn render(self) -> El<S>

The label, the field, the description, and the error, in a <div>.

Trait Implementations

impl<S: Debug> Debug for TextField<S>

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl<S> From<TextField<S>> for El<S>

fn from(field: TextField<S>) -> Self

Converts to this type from the input type.

impl<S> From<TextField<S>> for Node<S>

fn from(field: TextField<S>) -> Self

Converts to this type from the input type.