# Form actions

**`sonic-form-actions`** lays out form footer controls (submit, cancel) in a wrapping flex row with a `0.3rem` gap. Place it inside `sonic-form-layout`, where it spans the full width, or at the end of any block. Use `justify` and `direction` to arrange the controls.

## Basic example

With no attributes, actions align to the start of the row.

<sonic-code>
  <template>
    <form>
      <sonic-form-layout>
        <sonic-input label="First name"></sonic-input>
        <sonic-input label="Last name"></sonic-input>
        <sonic-form-actions>
          <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Check in</sonic-button>
          <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
        </sonic-form-actions>
      </sonic-form-layout>
    </form>
  </template>
</sonic-code>

## Justify

`justify` is the CSS `justify-content` of the row (default `flex-start`). Use `flex-end` for dialog-style footers or `center` for toolbars.

<sonic-code>
  <template>
    <form>
      <sonic-form-layout>
        <sonic-input label="First name"></sonic-input>
        <sonic-input label="Last name"></sonic-input>
        <sonic-form-actions justify="flex-end">
          <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
          <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
        </sonic-form-actions>
      </sonic-form-layout>
    </form>
  </template>
</sonic-code>

## Direction

`direction` is the CSS `flex-direction` (default `row`). `row-reverse` swaps the visual order but keeps the DOM and focus order.

<sonic-code>
  <template>
    <form>
      <sonic-form-layout>
        <sonic-input label="First name"></sonic-input>
        <sonic-input label="Last name"></sonic-input>
        <sonic-form-actions direction="row-reverse">
          <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
          <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
        </sonic-form-actions>
      </sonic-form-layout>
    </form>
  </template>
</sonic-code>

## Mixed controls

Any content can be slotted, such as a vertical `sonic-divider`. The default `alignItems` (`center`) keeps items of different heights aligned.

<sonic-code>
  <template>
    <form>
      <sonic-form-layout>
        <sonic-input label="First name"></sonic-input>
        <sonic-input label="Last name"></sonic-input>
        <sonic-form-actions justify="center">
          <sonic-button type="info" minWidth="12rem">
            <sonic-icon name="nav-arrow-left" library="iconoir" slot="prefix"></sonic-icon>
            Previous step
          </sonic-button>
          <sonic-divider vertical></sonic-divider>
          <sonic-button type="info" minWidth="12rem">
            <sonic-icon name="nav-arrow-right" library="iconoir" slot="suffix"></sonic-icon>
            Next step
          </sonic-button>
        </sonic-form-actions>
      </sonic-form-layout>
    </form>
  </template>
</sonic-code>

## API reference

| Attribute | Values | Description |
|----------|---------|-------------|
| `direction` | `row` (default) · `column` · `row-reverse` · `column-reverse` | CSS `flex-direction` of the row |
| `justify` | CSS `justify-content` value (default `flex-start`) | Distribution along the main axis |
| `alignItems` | CSS `align-items` value (default `center`) | Cross-axis alignment |

| Slot | Description |
|------|-------------|
| *(default)* | Footer controls |