How to use in input

There are three ways to declare a controlled input, two using the form system and the other in the traditional way, with useState.

It's important to declare form and fields outside the lifecycle of any component. Declaring them inside a component may cause several issues.

Declaring through a form field

If you have a form with a field, then you should declare your input like this:

./src/example.tsx

import { form, fields } from '@codeleap/form'

const myForm = form('example', {
  field1: fields.text({ label: 'Field 1' }),
})

function Form() {
  return <TextInput {...myForm.register('field1')} />
}

Declaring through a field

If you don't have a form but have an input and want to take advantage of the full validation system and global value access, then declare your own field and pass it to the input.

All inputs accept this field property.

./src/example.tsx

import { fields } from '@codeleap/form'

const fieldExample = fields.text({
  label: 'Example',
  placeholder: 'Placeholder',
  onValueChange: (value) => console.log(value),
})

function Field() {
  return <TextInput field={fieldExample} />
}

Declaring through a useState

If you don't have a form and don't need to use the benefits of a field, then declare using the standard approach.

All inputs receive onValueChange, and this property should be used.

./src/example.tsx

import { useState } from 'react'

function Component() {
  const [value, setValue] = useState('')

  return <TextInput value={value} onValueChange={setValue} />
}