# Custom inputs with useField

The `useField()` hook is the primary method of
connecting your input elements into the form system. It's comprised of

The hook can be used to create custom input components

```tsx live noInline
function MyApp() {
  return (
    <Form onSubmit={alert}>
      <MyCustomInput prop="test" label="Nice (required)" placeholder="Test" />
    </Form>
  )
}

function MyCustomInput(props) {
  const inputProps = useField({ prop: props.prop })

  const { value, onChange, onBlur, onFocus, name, id, ref, className } =
    inputProps

  return (
    <Label prop={props.prop} label={props.label}>
      <input
        type="text"
        value={value || ""}
        onChange={(e) => onChange(e.target.value)}
        onBlur={onBlur}
        onFocus={onFocus}
        name={name}
        id={id}
        ref={ref}
        className={className}
      />
      <Validate required>Required</Validate>
      <Validations />
    </Label>
  )
}

render(<MyApp />)
```
