Q3
  • Introduction
  • Related Projects
  • Roadmap
  • API
    • Core
      • Rest
      • Session
      • Schema plugins
    • Schemas
      • Rates
      • Rebates
      • Permissions
    • Utils
      • Subdocuments
      • Soft deleting
  • Client
    • gatsby-theme-q3
    • q3-components
      • Quantity
    • q3-ui-cart
      • Drawer
    • Admin
      • Builders
      • Containers
        • Contexts
    • Datatables
      • TableBadge
    • Forms
      • Field
      • Presets
        • <PasswordChange />
    • Repeater
    • UI
      • CallToAction
      • Avatar
      • CollapsiblePanel
      • SubMenu
Powered by GitBook
On this page

Was this helpful?

  1. Client
  2. Forms

Field

Input component for all sorts of data entry

import { Field } from 'q3-ui-forms/lib/builders';

/**
 * Select component that only shows when "bar" has value.
 * It will also reset itself when "bar's" state changes.
 */
export const CustomFormField = () => (
    <Field 
        name="foo"
        type="select"
        options={[
            { label: 'One', value: 1 },
            { label: 'Two', value: 2 }, 
        ]}
        conditional={['bar=*']}
        listen="bar"
        required
    />
);

Prop

Description

Validation

Required

listen

Reset this input's value when other form fields change

String, Array

PreviousFormsNextPresets

Last updated 5 years ago

Was this helpful?