Docs

Docs

Custom Field

Custom Field is a component for wrapping multiple components as a single field.

Custom Field is a component for wrapping multiple components as a single field. It provides standard input field features like label, helper, validation, and data binding. Use it to create custom input components.

Open in a
new tab
<CustomField
  label="Enrollment period"
  helperText="Cannot be longer than 30 days"
  errorMessage={errorMessage}
  invalid={errorMessage !== ''}
  required
  onValueChanged={validate}
>
  <DatePicker placeholder="Start date"></DatePicker>
  &ndash;
  <DatePicker placeholder="End date"></DatePicker>
</CustomField>

Basic Usage

Custom Field is optimized for wrapping the following components:

It can also be used to give a label, helper, and other field features for components that don’t have them built-in, such as List Box.

Value Type & Format

React

Custom Field only supports string values. The default value format is a string concatenation of the child component values, separated by the \t character.

You can customize the value format by defining your own value formatter and parser, as shown in the following example:

function Example() {
  return (
    // Phone Custom Field
    <CustomField
      formatValue={([code, number]: unknown[]) => (code && number ? [code, number].join('|') : '')}
      parseValue={(value: string) => (value ? value.split('|') : ['', ''])}
    >
      {/* Country code */}
      <Select />

      {/* Phone number */}
      <TextField />
    </CustomField>
  );
}

Native Input Fields

Custom Field works with native HTML elements. The whitespace variant can be used when components without an outer margin are used within Custom Field to compensate for the missing space between the label and the component itself.

Open in a
new tab
<CustomField
  label="Payment information"
  theme="whitespace"
  onValueChanged={(event) => {
    setCustomFieldValue(event.detail.value ?? '');
  }}
>
  <HorizontalLayout theme="spacing-s">
    <input
      aria-label="Cardholder name"
      pattern="[\\p{L} \\-]+"
      placeholder="Cardholder name"
      required
      type="text"
    />
    <input
      aria-label="Card number"
      pattern="[\\d ]{12,23}"
      placeholder="Card number"
      required
      type="text"
    />
    <input
      aria-label="Security code"
      pattern="[0-9]{3,4}"
      placeholder="Security code"
      required
      type="text"
    />
  </HorizontalLayout>
</CustomField>
<p>
  <b>Payment information:</b> {customFieldValue}
</p>

Size Variants

The small theme variant can be used to make Custom Field’s label, helper, and error message smaller. Custom Field doesn’t propagate its theme variant to its internal components, meaning each internal component’s theme variant must be set individually.

Open in a
new tab
<CustomField label="Price" theme="small">
  <HorizontalLayout theme="spacing-s">
    <TextField ref={amountRef} theme="small" />
    <Select
      ref={currencyRef}
      items={[
        { label: 'AUD', value: 'aud' },
        { label: 'CAD', value: 'cad' },
        { label: 'CHF', value: 'chf' },
        { label: 'EUR', value: 'eur' },
        { label: 'GBP', value: 'gbp' },
        { label: 'JPY', value: 'jpy' },
        { label: 'USD', value: 'usd' },
      ]}
      theme="small"
      style={{ width: '6em' }}
    />
  </HorizontalLayout>
</CustomField>