Skip to main content

Custom field

Custom fields are wrapper components that can host any form component.

Custom field - Usage

The custom field's properties allow you to control the validation state of the field and the helper text. It's a versatile tool to create your own form fields that can be used in combination with the 'Form' components to create complex forms.

Custom field

  1. Label
  2. Helper or feedback text
  3. Form component(s)
  4. Required indicator

Options​

  • Label: See form field.
  • Group label: Add a label to the group of radio buttons to provide context to your users. We typically use short and descriptive labels to summarize the options in the group.
  • Helper text: See form field.
  • Feedback text: See form field.
  • Customization: Add form components to create the use case you need. For example, for a file upload field, add an input field with a readonly state and an icon button.

Custom field example

Behavior in context​

States​

The states depend on the component that you use in the custom field. The custom field itself does not have any interaction states.

Dos and Don’ts​

  • Do use the custom field when your desired solution is not covered by the already existing form field components
  • Do use the custom field in combination with the form component to create complex forms
  • Don’t use the custom field for simple form fields, use the form field component instead
  • Don’t use the custom field without a form component, it is a wrapper component that is meant to be used in combination with the form component
  • Don’t use helper and feedback texts for single fields within a custom field, use the helper and feedback text of the whole custom field instead