useFormControlForwardedProps

Provides the accessibility features of the FormControl component.

This hook may be used when you are creating an accessible form control that doesn't use one of the provided form control components (TextInput, Radio, Select, etc.).

Example

Custom inputThis is not a Primer input, but it still has `aria-describedby` and similar attributes applied automatically

import React from 'react'
import {FormControl, useFormControlForwardedProps} from '@primer/react'


const CustomInput = (externalProps: {type: string}) => {
  const props = useFormControlForwardedProps(externalProps)
  return <input {...props} />
}


export default function Default() {
  return (
    <FormControl disabled={false} required={false}>
      <FormControl.Label>Custom input</FormControl.Label>
      <CustomInput type="text" />
      <FormControl.Caption>
        This is not a Primer input, but it still has `aria-describedby` and similar attributes applied automatically
      </FormControl.Caption>
    </FormControl>
  )
}

import React from 'react'
import {FormControl, useFormControlForwardedProps} from '@primer/react'

const CustomInput = (externalProps: {type: string}) => {
  const props = useFormControlForwardedProps(externalProps)
  return <input {...props} />
}

export default function Default() {
  return (
    <FormControl disabled={false} required={false}>
      <FormControl.Label>Custom input</FormControl.Label>
      <CustomInput type="text" />
      <FormControl.Caption>
        This is not a Primer input, but it still has `aria-describedby` and similar attributes applied automatically
      </FormControl.Caption>
    </FormControl>
  )
}

API

Loading data for useFormControlForwardedProps...

FormControl