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