Creating an input is as simple as doing the following

let (text, set_text) = create_signal("text".to_owned()); view! { <TextInput get=text set=set_text/> }

Text is: text


Wrap an input and a label to link them together.

<FormControl> <Label> "Label" </Label> <TextInput get=text set=set_text/> </FormControl> Label


You can use the InputType enum, to either create a Text, Password or Number input, Text being the default type when unspecified.

let (password, set_password) = create_signal("secret".to_owned()); view! { <PasswordInput get=password set=set_password/> }

Password is: secret

Note that the input is always given back to you as a String no matter the type. When using a number input, you may want to convert the String like this: str::parse::<f64>(v.as_str()).ok() to receive an Option<f64>, being None on invalid input.

let (number, set_number) = create_signal(Some(42.0)); let number_string = Signal::derive(move || format!("{:.1}", number.get())); view! { <NumberInput min=0.0 max=10.0 step=0.1 get=number set=set_number /> }

Number is: 4.2

Value updates#

An input can be used without providing the set prop. You will not be notified about changes to the input value. This can be useful when you know that the input will always be disabled and you never expect changes.

The set prop, providing you with new values whenever the inputs content changes, accepts an Out<String>, allowing you to either provide a WriteSignal whose value is set when the input changes or a custom Callback called whenever the input changes, allowing you to handle values by yourself if required.

You can define the set prop in one of the following ways.

view! { <Input get=text set=set_text/> <Input get=text set=create_callback(move |v: String| set_text.set(v))/> }


You can supply a placeholder to the input. It is shown as when the input is empty.

let (text, set_text) = create_signal(String::new()); view! { <TextInput get=text set=set_text placeholder="This is a placeholder"/> <Button variant=ButtonVariant::Flat size=ButtonSize::Small on_press=move |_| set_text.set(String::new())> "Clear input" </Button> }


You may overwrite any of the following CSS variables to meet your styling needs.

--input-padding --input-color --input-background-color --input-border --input-border-bottom --input-border-radius --input-min-height --input-focused-border-color