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.
  • 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
}),

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())
})