Forms

Inputs have been changed to be 100% width by default. Use columns to put inputs inline with each other.

Checkboxes and radio buttons are larger and have the accent-color set. There's also a checkbox-container class to make checkbox and label pairs 100% width.

required fields are marked with a red left border.

For the buttons at the bottom of a form, there's a form-actions class with split-after and split-before to move buttons to the right. You should only use split-before if there is no item on the left. Doing otherwise will cause wrapping issues.

While you can arrange form buttons in any order you want, we use the format of keeping cancel on the left, and then secondary action and primary action on the right. The primary action should be the last button.

Only the primary action for the form (Create, Save, Submit, etc.) should have a primary button class. All others should use --secondary classes.

form-actions has extra styling if it's in a fieldset (commonly used for search filters)