Width utility: stacks its children in one column and stretches each to the full row width with one gap. It adds no roles and no wrappers, so labels and tab order are what the fields themselves produce. Use in form layouts where every field should fill the row.
import { Component } from "@angular/core";
import { SuiFluid } from "@shineui/angular";
@Component({
standalone: true,
imports: [SuiFluid],
template: `<sui-fluid gap="14"><sui-input-text label="Company" name="company" value="Falls City Supply Co."></sui-input-text>
<sui-input-text label="EIN" name="ein" value="35-1882210"></sui-input-text></sui-fluid>`,
})
export class Example { }
Basic
Every direct child becomes a block and stretches to the row. Fluid adds nothing around the fields, so their labels, tab order and screen reader output are untouched.
Every direct child stretches, inline elements and buttons included. Wrap actions in one element of your own when you want them to keep their natural width.
Vertical gap between children in px. 14 matches the form stack.
Slots
Slot
Description
(default)
The controls to stretch; each direct child fills the row.
Theming
Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.