`useCustomValidity()`

Beta: this hook is in beta — its API may change in a future release.

Sets a custom validity message on a form control using the constraint validation API. Form primitives such as TextInput, TextArea, Select, Checkbox, Radio and Switch expose this as their customValidity property.

import {useCustomValidity} from '@sanity/ui'
import {useRef} from 'react'

function App() {
  const inputRef = useRef(null)

  // Marks the input as invalid in the browser's
  // constraint validation API
  useCustomValidity(inputRef, 'This value is not valid')

  return <input ref={inputRef} />
}

Signature

(
  ref: {current: null | {setCustomValidity: (validity: string) => void}},
  customValidity: string | undefined
) => void

`useCustomValidity()`

Beta: this hook is in beta — its API may change in a future release.

import {useCustomValidity} from '@sanity/ui'
import {useRef} from 'react'

function App() {
  const inputRef = useRef(null)

  // Marks the input as invalid in the browser's
  // constraint validation API
  useCustomValidity(inputRef, 'This value is not valid')

  return <input ref={inputRef} />
}

Signature

(
  ref: {current: null | {setCustomValidity: (validity: string) => void}},
  customValidity: string | undefined
) => void

`useCustomValidity()`

Beta: this hook is in beta — its API may change in a future release.

import {useCustomValidity} from '@sanity/ui'
import {useRef} from 'react'

function App() {
  const inputRef = useRef(null)

  // Marks the input as invalid in the browser's
  // constraint validation API
  useCustomValidity(inputRef, 'This value is not valid')

  return <input ref={inputRef} />
}import {useCustomValidity} from '@sanity/ui'
import {useRef} from 'react'

function App() {
  const inputRef = useRef(null)

  // Marks the input as invalid in the browser's
  // constraint validation API
  useCustomValidity(inputRef, 'This value is not valid')

  return <input ref={inputRef} />
}

Signature

(
  ref: {current: null | {setCustomValidity: (validity: string) => void}},
  customValidity: string | undefined
) => void(
  ref: {current: null | {setCustomValidity: (validity: string) => void}},
  customValidity: string | undefined
) => void