Components

Components combine HTML elements (see below) into easier-to-use widgets, simplifying the input, providing repeatability (DRY), but still permitting extensive configuation.

FormField

FormField components group a Label, a form input of some sort, and an (optional) help box. IDs are automatically generated.

The StringField output.

<div
  id="_EpUcrcqdpMHcLzwvJsuE2e-wrapper"
  class="form-field string-field"
>
  <label
    id="_EpUcrcqdpMHcLzwvJsuE2e-label"
    for="_EpUcrcqdpMHcLzwvJsuE2e"
  >
    Name
  </label>
  <input
    id="_EpUcrcqdpMHcLzwvJsuE2e"
    name="name"
    value="Bob"
    type="Text"
  />
</div>

CheckboxField = (field = ) => (attributes = ) =>
EmailField = (field = ) => (attributes = ) =>
NumberField = (field = ) => (attributes = ) =>
SelectField = (field = ) => (attributes = ) =>
StringField = (field = ) => (attributes = ) =>
TextField = (field = ) => (attributes = ) =>

TabularFormField

TabularFormField components return a Tr table row with two cells: a Th containing the input's Label, and a Td containing the form input.

The TabularStringField output.

<tr
  id="income-wrapper"
  class="tabular-form-field dollars"
>
  <th id="_A3UW9FoSLxiwYiCp29Db9A">
    <label
      id="income-label"
      for="income"
    >
      Income
    </label>
  </th>
  <td id="_8voTWs6PYLjs58ioz8mwBu">
    <input
      id="income"
      name="income"
      type="Number"
    />
  </td>
</tr>