Form Field

Form Field is a single field in a form. The following elements are designed to work inside a form field:

• Form label
• input:
  • Checkbox
  • Dropdown select
  • Multiselect
  • Radio
  • Text area
  • Text input
  • Toggle switch
• Form caption

Label

This is a help text

Label

This is a help text

Label

Error message

Label

Warning message

<!-- Default Text input -->
<qtm-form-field>
  <qtm-form-label required for="example2">Label</qtm-form-label>
  <qtm-text-input
    placeholder="Text input default"
    left-icon="account_circle"
    input-id="example2"
  ></qtm-text-input>
  <qtm-form-caption>This is a help text</qtm-form-caption>
</qtm-form-field>
<!-- Text input in disabled severity, size small -->
<qtm-form-field>
  <qtm-form-label required for="example1" size="small" disabled
    >Label</qtm-form-label
  >
  <qtm-text-input
    placeholder="Text input small disabled"
    left-icon="account_circle"
    input-id="example1"
    size="small"
    disabled
  ></qtm-text-input>
  <qtm-form-caption size="small" disabled>This is a help text</qtm-form-caption>
</qtm-form-field>
<!-- Text input in error severity, size medium -->
<qtm-form-field>
  <qtm-form-label required for="example3" size="medium">Label</qtm-form-label>
  <qtm-text-input
    placeholder="Text input medium"
    left-icon="account_circle"
    input-id="example3"
    size="medium"
    severity="error"
  ></qtm-text-input>
  <qtm-form-caption size="medium" severity="error">Error message</qtm-form-caption>
</qtm-form-field>
<!-- Text input in warning severity, size large -->
<qtm-form-field>
  <qtm-form-label required for="example4" size="large">Label</qtm-form-label>
  <qtm-text-input
    placeholder="Text input large"
    left-icon="account_circle"
    input-id="example4"
    size="large"
    severity="warning"
  ></qtm-text-input>
  <qtm-form-caption size="large" severity="warning"
    >Warning message</qtm-form-caption
  >
</qtm-form-field>

API

qtm-form-field

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing