packages/react-aria/docs/textfield/useTextField.mdx
{/* Copyright 2020 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */}
import {Layout} from '@react-spectrum/docs'; export default Layout;
import docs from 'docs:@react-aria/textfield'; import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/textfield/package.json'; import Anatomy from './anatomy.svg';
<PageDescription>{docs.exports.useTextField.description}</PageDescription>
<HeaderInfo packageData={packageData} componentNames={['useTextField']} sourceData={[ {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-1.2/#textbox'} ]} />
Text fields can be built with <input>
or <textarea>
and <label> elements,
but you must manually ensure that they are semantically connected via ids for accessibility.
useTextField helps automate this, and handle other accessibility features while
allowing for custom styling.
<input> or <textarea> elementText fields consist of an input element and a label. useTextField automatically manages
the relationship between the two elements using the for attribute on the <label> element
and the aria-labelledby attribute on the <input> element.
useTextField also supports optional description and error message elements, which can be used
to provide more context about the field, and any validation messages. These are linked with the
input via the aria-describedby attribute.
useTextField returns props that you should spread onto the appropriate element:
<TypeContext.Provider value={docs.links}> <InterfaceType properties={docs.links[docs.exports.useTextField.return.base?.id ?? docs.exports.useTextField.return.id].properties} /> </TypeContext.Provider>
If there is no visual label, an aria-label or aria-labelledby prop must be passed instead
to identify the element to screen readers.
import type {AriaTextFieldProps} from '@react-aria/textfield';
import {useTextField} from '@react-aria/textfield';
function TextField(props: AriaTextFieldProps) {
let {label} = props;
let ref = React.useRef(null);
let {labelProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors} = useTextField(props, ref);
return (
<div style={{display: 'flex', flexDirection: 'column', width: 200}}>
<label {...labelProps}>{label}</label>
<input {...inputProps} ref={ref} />
{props.description && <div {...descriptionProps} style={{fontSize: 12}}>{props.description}</div>}
{isInvalid && <div {...errorMessageProps} style={{color: 'red', fontSize: 12}}>{validationErrors.join(' ')}</div>}
</div>
);
}
<TextField label="Email" />
useTextField also supports multi-line text entry with the <textarea> element via the inputElementType prop.
import type {AriaTextFieldProps} from '@react-aria/textfield';
import {useTextField} from '@react-aria/textfield';
function TextArea(props: AriaTextFieldProps<HTMLTextAreaElement>) {
let {label} = props;
let ref = React.useRef(null);
let {labelProps, inputProps} = useTextField({...props, inputElementType: 'textarea'}, ref);
return (
<div style={{display: 'flex', flexDirection: 'column', width: 200}}>
<label {...labelProps}>{label}</label>
<textarea {...inputProps} ref={ref} />
</div>
);
}
<TextArea label="Description" />
The following examples show how to use the TextField component created in the above example.
A TextField's value is empty by default, but an initial, uncontrolled, value can be provided using the defaultValue prop.
<TextField
label="Email"
defaultValue="[email protected]" />
The value prop can be used to make the value controlled. The onChange event is fired when the user edits the text, and receives the new value.
function Example() {
let [text, setText] = React.useState('');
return (
<>
<TextField label="Your text" onChange={setText} />
<p>Mirrored text: {text}</p>
</>
);
}
The description prop can be used to associate additional help text with a text field.
<TextField
label="Email"
description="Enter an email for us to contact you about your order." />
useTextField supports HTML constraint validation props such as isRequired, type="email", minLength, and pattern, as well as custom validation functions, realtime validation, and server-side validation. It can also be integrated with other form libraries. See the Forms guide to learn more.
When a TextField has the validationBehavior="native" prop, validation errors block form submission. To display validation errors, use the validationErrors and errorMessageProps returned by useTextField. This allows you to render error messages from all of the above sources with consistent custom styles.
<form>
<TextField
label="Email"
name="email"
/*- begin highlight -*/
type="email"
isRequired
validationBehavior="native"
/*- end highlight -*/
/>
<input type="submit" style={{marginTop: 8}} />
</form>
A TextField can be disabled using the isDisabled prop.
<TextField label="Email" isDisabled />
The isReadOnly boolean prop makes the TextField's text content immutable. Unlike isDisabled, the TextField remains focusable
and the contents can still be copied. See the MDN docs for more information.
<TextField label="Email" defaultValue="[email protected]" isReadOnly />
A TextField can be marked as required using the isRequired prop. This is exposed to assistive technologies by React Aria. It's your responsibility to add additional visual styling if needed.
<TextField label="Email" isRequired />
TextField supports the name prop for integration with HTML forms. In addition, attributes such as type, pattern, inputMode, and others are passed through to the underlying <input> element.
<TextField label="Email" name="email" type="email" />
In right-to-left languages, text fields should be mirrored. The label should be right aligned, along with the text in the text field. Ensure that your CSS accounts for this.