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 -->
<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

QtmFormField

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