Forms

Source component

Form elements

Target component

See individual form component docs for details on each

Mapping

In Fly Components, form elements are typically wrapped in a fly-form-group class, and may have a <label> element placed next to or before the form element.

In Pluma, all form elements have a @label (or @ariaLabel, @ariaLabelledby depending on use case) argument, which already handles the label. A wrapping fly-form-group is also not needed, as Pluma components handle the layouts.

Examples

Source:

<div class="fly-form-group">
  <label>First Name</label>
  <input class="fly-form-control" type="text" value="Bob Parr" placeholder="First Name">
</div>

Target:

<PlumaTextField @label="First Name" @value="Bob Parr" @placeholder="First Name" />