# fc-form-section

An element by Forter
<!-- Author: oweingart <oweingart@forter.com> -->

## Usage

```html
<script>
   import '@forter/form-section';
</script>

<fc-form-section>
  <fc-form-field></fc-form-field>
</fc-form-section>
```

## Properties

| Property                | Attribute     | Type                   | Default | Description                                |
|-------------------------|---------------|------------------------|---------|--------------------------------------------|
| `align`                 | `align`       | `string`               |         | Alignment of the form section (row/column) |
| `collapsable`           | `collapsable` | `boolean`              | false   | If the section is collapsable              |
| `collapse`              | `collapse`    | `boolean`              | false   | If the section is currently collapsed      |
| `dirty`                 | `dirty`       | `boolean`              | false   | If the section is dirty                    |
| `disabled`              | `disabled`    | `boolean`              | false   | Internal Observables                       |
| `invalidFields`         |               | `never[]`              |         |                                            |
| `isCollapsed`           |               | `"right" \| "down"`    |         |                                            |
| `isSlottedLabel`        |               | `"" \| TemplateResult` |         |                                            |
| `label`                 | `label`       | `"" \| TemplateResult` |         |                                            |
| `missingRequiredFields` |               | `never[]`              |         |                                            |
| `model`                 |               | `{}`                   | {}      |                                            |
| `touched`               | `touched`     | `boolean`              | false   | If the section was touched                 |
| `valid`                 | `valid`       | `boolean`              | false   | If the section is valid                    |

## Events

| Event         |
|---------------|
| `field-added` |

## CSS Custom Properties

| Property                                | Description                                      |
|-----------------------------------------|--------------------------------------------------|
| `--fc-form-section-arrow-color`         | section label arrow color (when section is collapsable) . default: "var(--fc-gray-700)" |
| `--fc-form-section-color`               | section font color. default: "balck"             |
| `--fc-form-section-label-font-size`     | section label font size. default: "12px"         |
| `--fc-form-section-label-font-weight`   | section label font weight. default: "normal"     |
| `--fc-form-section-label-invalid-color` | section label color when the section is invalid. default: "var(--fc-red-900)" |
| `--fc-form-section-label-margin-bottom` | section label margin bottom. default: "0px"      |
| `--fc-form-section-margin-right-item`   | section margin right of each field (row alignment only). default: "20px" |
| `--fc-form-section-padding-left`        | section padding left. default: "5px"             |