Skip to main content
🏠FormForm FieldVersion: 2.0.0-beta.6

Form Field

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

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 is disabled, 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 is error, 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 is warning, 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

PropertyTypeDefaultDescription
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing