@finastra/formfield

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