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
<QtmFormField>
  <QtmFormLabel required for="example2">Label</QtmFormLabel>
  <QtmTextInput
    placeholder="Text input default"
    leftIcon="account_circle"
    inputId="example2"
  ></QtmTextInput>
  <QtmFormCaption>This is a help text</QtmFormCaption>
</QtmFormField>
// Text input in disabled severity, size small
<QtmFormField>
  <QtmFormLabel required for="example1" size="small" disabled
    >Label</QtmFormLabel
  >
  <QtmTextInput
    placeholder="Text input small disabled"
    leftIcon="account_circle"
    inputId="example1"
    size="small"
    disabled
  ></QtmTextInput>
  <QtmFormCaption size="small" disabled>This is a help text</QtmFormCaption>
</QtmFormField>
// Text input in error severity, size medium
<QtmFormField>
  <QtmFormLabel required for="example3" size="medium">Label</QtmFormLabel>
  <QtmTextInput
    placeholder="Text input medium"
    leftIcon="account_circle"
    inputId="example3"
    size="medium"
    severity="error"
  ></QtmTextInput>
  <QtmFormCaption size="medium" severity="error">Error message</QtmFormCaption>
</QtmFormField>
// Text input in warning severity, size large
<QtmFormField>
  <QtmFormLabel required for="example4" size="large">Label</QtmFormLabel>
  <QtmTextInput
    placeholder="Text input large"
    leftIcon="account_circle"
    inputId="example4"
    size="large"
    severity="warning"
  ></QtmTextInput>
  <QtmFormCaption size="large" severity="warning">Warning message</QtmFormCaption>
</QtmFormField>

API

Loading API documentation...