Form Widget
The form widget coordinates the input from a collection of input widgets. It provides a button to submit the form.
Input widgets can designate a form name. When the corresponding form is then submitted, the form widget will gather the input values and submit them to the widget action.
Configurable components
| Class Name | Description |
|---|---|
| card | Background card component |
| primary | Primary form component |
Widget Properties
| Name | Description |
|---|---|
| form | Name of the form. Use this name in the input widgets to specify the form |
| text | Text to display in the form button. Defaults to "Save" |
| validate | Regular expression to validate the form input |
CSS Properties
| CSS Property | Description |
|---|---|
| primary.font-size | Font size of the form text. Scales by default according to the widget size |
| primary.font-weight | Font weight of the form text. Defaults to bold |
| button.color | Color of the form text |
| button.background | Background color of the form button. Defaults to accent |
| button.--w-variant | Set to elevated, flat, tonal, outlined, text or plain |
| button.--w-block | Set to true to make the button full width |
| button.--w-density | Set to compact, default or comfortable |
| button.--w-ripple | Set to enable the ripple effect |