Formfield

Usage

A form field is a text caption for FDS input elements including fds-checkbox, fds-radio, and fds-switch.

It is equivalent to the native element in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.

fds-formfield extends Material web's mwc-formfield-base.

Import

npm i @finastra/formfield

import '@finastra/formfield';
import '@finastra/checkbox';
...
<fds-formfield label="Accept terms and conditions">
    <fds-checkbox checked></fds-checkbox>
</fds-formfield>

API

Properties

| Property | Attribute | Type | Default | Description | |----------------|----------------|-----------|---------|--------------------------------------------------| | alignEnd | alignEnd | boolean | false | Align the component at the end of the label.. | | label | label | string | "" | The text to display for the label and sets a11y label on input. (visually overriden by slotted label). | | nowrap | nowrap | boolean | false | Prevents the label from wrapping and overflow text is ellipsed. | | spaceBetween | spaceBetween | boolean | false | Add space between the component and the label as the formfield grows. |

Methods

| Method | Type | |---------|------------| | click | (): void |

CSS Custom Properties

| Property | Default | Description | |--------------------|-----------|--------------| | --fds-label-font | "#694ED6" | Switch color |