Choice Fields

Mutually exclusive branches. Selecting one branch disables the others and relaxes their child field validation until that branch becomes active.

What It Demonstrates

• choice array on a heading to declare mutually exclusive branches
• Branch children are only validated once the branch is active
• Sibling branches are automatically disabled when one branch has a value
• Each branch can have its own children with independent fields

Example

Payment method

Credit / debit card

Card number

CVV

Bank transfer

IBAN

IsDirty: false
Touched: false
Valid: true

// form values:
{
  "payment": {
    "card": {},
    "transfer": {}
  }
}
    

Choice Structure

The choice property replaces children on the heading. Each entry becomes a selectable branch:

choice: [
  {
    name: 'card',
    fieldOptions: { label: 'Credit / debit card' },
    children: [
      { name: 'number', type: 'text', fieldOptions: { label: 'Card number' } },
      { name: 'cvv', type: 'text', fieldOptions: { label: 'CVV' } },
    ],
  },
  {
    name: 'transfer',
    fieldOptions: { label: 'Bank transfer' },
    children: [
      { name: 'iban', type: 'text', fieldOptions: { label: 'IBAN' } },
    ],
  },
],

Full Metadata

const metadata: Metadata[] = [
  {
    name: 'payment',
    type: 'heading',
    fieldOptions: { label: 'Payment method' },
    choice: [
      {
        name: 'card',
        fieldOptions: { label: 'Credit / debit card' },
        children: [
          { name: 'number', type: 'text', fieldOptions: { label: 'Card number' } },
          { name: 'cvv', type: 'text', fieldOptions: { label: 'CVV' } },
        ],
      },
      {
        name: 'transfer',
        fieldOptions: { label: 'Bank transfer' },
        children: [
          { name: 'iban', type: 'text', fieldOptions: { label: 'IBAN' } },
        ],
      },
    ],
  },
];

Related Source

• FormExampleChoiceFields.vue
• AdvancedFormTemplate.vue