Controller

Solid Hook Form embraces uncontrolled components and native inputs, however it's hard to avoid working with external controlled component such as Kobalte. This wrapper component will make it easier for you to work with it.

Props

The following table contains information about the arguments for Controller.

Name	Type	Description
control	Object	control object is from invoking createForm. Optional when using FormProvider.
name	string	Unique name of your input.
render	Function	This is a render prop. A function that returns an element and provides the ability to attach events and value into the component. This simplifies integrating with external controlled components with non-standard prop names. Provides onInput, onChange, name, ref and value to the child component, and also a fieldState object which contains specific input state.
rules	Object	Validation rules in the same format for register options, which includes: required, min, max, minLength, maxLength, pattern, validate

Using Component API

import { TextField } from "@kobalte/core/text-field"
import { createForm, Controller } from "solid-hook-form"

export const ExampleForm = () => {
  const { control, handleSubmit } = createForm({
    defaultValues: {
      field: ""
    }
  })

  const onSubmit = (values) => {
    console.log(values)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller 
        control={control}
        name="field"
        render={({ field, fieldState }) => (
          <TextField>
            <TextField.Label>Field</TextField.Label>
            <TextField.Input
              name={field.name}
              ref={field.ref}
              value={field.value()}
              onChange={field.onChange}
              validationState={fieldState.error() ? "invalid" : "valid"}
            />
            <TextField.ErrorMessage>{fieldState.error()?.message}</TextField.ErrorMessage>
          </TextField>
        )}
        rules={{
          minLength: { value: 5, message: "Min 5" }
        }}
      />
    </form>
  )
}