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

account_circle

This is a help text

Label

account_circle

This is a help text

Label

account_circle

Error message

Label

account_circle

Warning message

Event handling

Not applicable. The FormField component is a container element that wraps form elements and does not support any event handlers directly. Event handling should be implemented on the individual form controls inside the FormField.

Custom Classes

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

Label

This is a help text

<FormField classes="border border-gray-300 p-m rounded-m">
  <FormLabel for="example5">Label</FormLabel>
  <TextInput
    placeholder="Text input with custom form field"
    inputId="example5"
  />
  <FormCaption>This is a help text</FormCaption>
</FormField>

API

QtmFormField

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