fc-form-section

An element by Forter

Usage

<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" |