Skip to main content

Declare fields

The fields API provides various field types for different input needs.

Available Field Types​

  • text: Standard text input field.
  • number: Numeric input field for counters, sliders, or typed numeric values.
  • list: List-like field for values managed as an array.
  • boolean: Boolean input field (Checkbox and Switch).
  • date: Date picker input field.
  • file: File upload input.
  • selectable: Select field with predefined options.

Field options​

Each field type supports various options for customization.

Common Options​

In addition to accepting the types declared in ExtraFieldOptions, fields also accept these other configurations:

  • defaultValue (any - optional): Default value of the field.
  • onValueChange (function - optional): Callback function called when the value changes.
  • validate (function - optional): Validation function (e.g., using zod).
  • name (string - optional): Field name.

Example: Text Field with Validation​

src/form.ts
import { fields, zodValidator } from '@codeleap/form'

const usernameField = fields.text({
  label: 'Username',
  placeholder: 'Enter your username',
  validate: zodValidator(z.string().min(3).max(20))
})

Example: Selectable Field​

src/form.ts
import { fields } from '@codeleap/form'

const roleField = fields.selectable({
  label: 'Role',
  options: [
    { label: 'Admin', value: 'admin' },
    { label: 'User', value: 'user' }
  ]
})

Example: Date Field​

src/form.ts
import { fields } from '@codeleap/form'

const birthdayField = fields.date({
  label: 'Date of birth',
  placeholder: 'Birthday',
  minimumDate: new Date(),
  maximumDate: new Date(),
})

Example: Boolean Field​

src/form.ts
import { fields } from '@codeleap/form'

const boolField = fields.boolean({
  label: 'Bool',
  defaultValue: true
}),

Example: Number Field​

src/form.ts
import { fields } from '@codeleap/form'

const quantityField = fields.number({
  label: 'Quantity',
  defaultValue: 1,
})

Use fields.number(...) when the UI represents a numeric value semantically as a number, such as counters, sliders, or quantity selectors.

Example: List Field​

src/form.ts
import { fields } from '@codeleap/form'

const tagsField = fields.list({
  defaultValue: ['react', 'typescript'],
})

Use fields.list(...) when the field value is an array and the control should manage several values together instead of a single scalar input.

Choosing the right field family​

  • use fields.text(...) for free text and most text-like inputs
  • use fields.number(...) when the value should be a number
  • use fields.boolean(...) for true/false controls
  • use fields.selectable(...) when the input must choose from predefined options
  • use fields.date(...) for date-like values
  • use fields.file(...) for upload or file-selection flows
  • use fields.list(...) when the field value is naturally an array

Validation​

Validation is handled using zod, allowing for flexible input constraints.

src/form.ts
import { fields, zodValidator } from '@codeleap/form'

const emailField = fields.text({
  label: 'Email',
  validate: zodValidator(z.string().email())
})