Skip to main content

FormControl

FormControl is the wrapper you use to make form fields feel consistent.

Instead of rebuilding label text, helper copy, required markers, and validation placement around every field by hand, FormControl gives those pieces one predictable vertical layout. This is helpful for text fields, selects, comboboxes, and any other control that belongs in a form.

Example​

use fission::prelude::*;

let node = FormControl {
id: None,
label: Some("Email address".into()),
required: true,
error: view.state.email_error.clone(),
helper: Some("We use this for receipts and login alerts.".into()),
child: Box::new(
    TextInput {
        value: view.state.email.clone(),
        label: Some("Email address".into()),
        on_change: Some(email_change_action),
        ..Default::default()
    }
    .into_node(),
),
}
.build(ctx, view);

The wrapper controls layout and presentation. The child still owns the actual input event flow.

Field table​

FieldTypeMeaningNotes / default behavior
idOption<WidgetNodeId>Optional stable identity for the wrapper.Defaults to None.
labelOption<String>Visible label shown above the child.Defaults to None.
childBox<Node>The field or control being wrapped.Required.
errorOption<String>Validation message shown below the child.If present, it takes precedence over helper.
helperOption<String>Supporting copy shown below the child when there is no error.Defaults to None.
requiredboolWhether the label should show a required marker.Defaults to false.

What it does and what it does not do​

FormControl solves visual consistency. It does not validate values, run reducers, or automatically connect label semantics to the child. That last point matters: the checked-in implementation renders the label as text above the child, but it does not inject that label into the child's accessibility semantics for you. If the child needs a semantic label, set it on the child widget too.

Specific advice​

Use FormControl when the child is part of a larger form with validation or supporting copy. Skip it for controls that already come with their own integrated label and meaning, such as many simple Checkbox rows.

TextInput, Select, Combobox, and Checkbox.