Fieldset

Fieldset draws the legend text above a column that holds its children, with space between the two. Give it background, padding or corner_radius and it wraps the group in a box, so the group reads as a panel. With none of those three props it adds no box.

The screen owns the state. Fieldset keeps none and has no event props. The controls inside it, usually Field components, send their events to your screen.

In a browser, <fieldset disabled> disables every control inside it. A Mob node tree has no ownership relationship that lets a parent switch off its children, and rewriting arbitrary children to inject disabled: true would mangle nodes the component does not understand. So disabled mutes the legend and nothing more.

The legend color defaults to :on_surface, the ink of a theme surface. When you set your own background, also set color so the legend stays readable.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob fieldset

The generator registers the tag, so you can use it in ~MOB markup. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaFieldset>. Without a prefix, the tag is <Fieldset>.

Set legend to title the group and pass the controls as children. In the snippet, line1() and city() stand for the nodes of your controls. The showcase wraps two Field components in a group with background, padding and corner_radius set, which draws the group as a raised panel.

Fieldset with a legend

LTR RTL

Preview

Show the whole example Show less

<MishkaFieldset legend="Billing address">{[line1(), city()]}</MishkaFieldset>

Props of the <MishkaFieldset> tag. The children are the controls.

• disabled does not switch off the controls inside the group. The browser's <fieldset disabled> does.
• id and the *_class attributes are not ported. Color, spacing and rounding are props.

• Headless Fieldset, the web component this one ports.
• Mob Field, the labeled control to put inside a group.
• Mob Checkbox Group and Mob Radio Group, two groups of choices.
• Mob components, the full list of native components.