Form Control Group

<sl-form-control-group> | SlFormControlGroup
Since 1.0 stable

Container for form controls

Male Female 
<sl-form-control-group>
  <sl-input label="Name" name="name" value="Jane"></sl-input>
  <sl-input label="Email" name="email" value="jane@smith.com"></sl-input>
  <sl-select label="Gender" name="gender" value="Female">
    <sl-option value="Male">Male</sl-option>
    <sl-option value="Female">Female</sl-option>
  </sl-select>
</sl-form-control-group>

Examples

Customising spacing

Use the --form-control-group-spacing CSS custom property to change the spacing between form controls.

Male Female 
<sl-form-control-group style="--form-control-group-spacing: var(--sl-spacing-small);">
  <sl-input label="Name" name="name" value="Jane"></sl-input>
  <sl-input label="Email" name="email" value="jane@smith.com"></sl-input>
  <sl-select label="Gender" name="gender" value="Female">
    <sl-option value="Male">Male</sl-option>
    <sl-option value="Female">Female</sl-option>
  </sl-select>
</sl-form-control-group>

Slots

Name Description
(default) The default slot.

Learn more about using slots.

Custom Properties

Name Description Default
--form-control-group-spacing The spacing between form controls. Default is var(–sl-spacing-large)

Learn more about customizing CSS custom properties.