Skip to main content

Custom field

Since 2.6.0

Guidelines

The custom field is a wrapper component that can host any forms component. Its properties allows you to control the validation state of the field and the helper text. The custom field is 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