Form Layout

cc-form-layout using CSS Grid under the hood to make it easier for you to build responsive forms with multiple columns.

By default, Form Layout has 2 columns by displaying 2 input fields per row. When the layout width is smaller, it adjusts to a single-column.

<form action="/form-submit">
  <cc-form-layout>
    <cc-text-field label="First name"></cc-text-field>
    <cc-text-field label="Last name"></cc-text-field>
    <cc-text-field label="Email"></cc-text-field>
    <cc-text-field label="Username"></cc-text-field>
    <cc-password-field label="Password"></cc-password-field>
    <cc-password-field label="Confirm password"></cc-password-field>
    <cc-button theme="primary" type="submit">Get Started</cc-button>
  </cc-form-layout>
</form>

Custom Layout

You can define how many columns Form Layout should use based on the screen width.

You can override breakpoints by using CSS media query.

/*
  Inside your form css
*/
@media (min-width: 400px) {
  cc-form-layout {
    --cc-form-layout-columns: 2;
  }
}

@media (min-width: 1360px) {
  cc-form-layout {
    --cc-form-layout-columns: 3;
  }
}

Or, setting it globally in your app.css.

@media (min-width: 400px) {
  :root {
    --cc-form-layout-columns--global: 2;
  }
}

@media (min-width: 1360px) {
  :root {
    --cc-form-layout-columns--global: 3;
  }
}

Column Span

You can add colspan to make a grid item span multiple columns.

<cc-form-layout>
  <cc-text-field label="First name"></cc-text-field>
  <cc-text-field label="Last name"></cc-text-field>
  <cc-text-field label="Username" colspan="2"></cc-text-field>
  <cc-password-field label="Password"></cc-password-field>
  <cc-password-field label="Confirm password"></cc-password-field>
  <cc-button theme="primary">Get Started</cc-button>
</cc-form-layout>

Label Position

Side-aligned labels are beneficial in reducing the overall height of a form, particularly when vertical space is constrained or dealing with longer forms. Additionally, side-aligned labels are commonly employed when comparing numerical data.

This is actually implemented in cc-text-field component. You just need to add a label-position-side attribute.

<cc-form-layout>
  <cc-text-field label="Revenue" label-position-side>
    <span slot="suffix">EUR</span>
  </cc-text-field>
  <cc-text-field label="Expenses" label-position-side>
    <span slot="suffix">EUR</span>
  </cc-text-field>
  <cc-text-field label="Invoices" label-position-side>
    <span slot="suffix">EUR</span>
  </cc-text-field>
</cc-form-layout>