Field

The field represents a form field, managing its state, validation, and other related properties and actions.

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

const fieldExample = fields.text({
  label: 'Username',
  placeholder: 'Enter your username',
})

API

name: Accesses the name of the field.

src/fieldExample.ts
import { fieldExample } from './fieldApi'

function onSubmit() {
  console.log('Field name', fieldExample.name)
}

value: Accesses the current value of the field.

src/fieldExample.ts
import { fieldExample } from './fieldApi'

function onSubmit() {
  console.log('Field value', fieldExample.value)
}

isValid: Accesses the current value of the field.

src/fieldExample.ts
import { fieldExample } from './fieldApi'

function onSubmit() {
  console.log('Is field valid', fieldExample.isValid)
}

setValue: Sets a new value for the field.

src/fieldExample.ts
import { fieldExample } from './fieldApi'

function onSubmit() {
  fieldExample.setValue('newValue')
}

useValue: Hook returns the current value of the field.

src/fieldExample.tsx
import { fieldExample } from './fieldApi'

function Component() {
  const value = fieldExample.useValue()

  return <Text text={value} />
}

resetValue: Resets the field’s value to its initial value.

src/fieldExample.ts
import { fieldExample } from './fieldApi'

function reset() {
  fieldExample.resetValue()
}

use: Provides hooks related to the field (value, validation, changed status, etc.)

src/fieldExample.tsx
import { fieldExample } from './fieldApi'

function Component() {
  const { value, changed, validation } = fieldExample.use()

  return null
}

changed: Checks whether the field’s value has changed from its initial value.

src/fieldExample.ts
import { fieldExample } from './fieldApi'

function checkChange() {
  console.log('Has field value changed?', fieldExample.changed())
}

validate: Validates the field’s value and returns the result.

src/fieldExample.ts
import { fieldExample } from './fieldApi'

function validateField() {
  const validation = fieldExample.validate()
  console.log('Field validation result:', validation)
  if (!validation.isValid) return validation.error
}

useValidation: Returns the validation status and other details (e.g., whether the field is valid, invalid, changed, etc.).

src/fieldExample.tsx
import { fieldExample } from './fieldApi'

function Component() {
  const { isValid, message, error } = fieldExample.useValidation()

  return null
}

API​

API