Skip to main content

Text Field

Allows users to enter and edit information.

http://localhost:3000
<TextField aria-label="name" placeholder="Enter name..." />

Usage​

Label​

Attach a label to the select using the label prop.

http://localhost:3000
<TextField label="Name" />

HelperText​

Add additional context as well as display error messages with the helperText prop.

http://localhost:3000
<TextField label="Name" helperText="Please enter a name" />

Controlled​

A text area's state can be controlled by a parent React component by setting the value prop and passing a handler to the onChange prop.

http://localhost:3000
function ControlledExample() {
  const [value, setValue] = React.useState('Lorem ipsum');

  return <TextField aria-label="name" onChange={setValue} value={value} />;
}

Clickable icon​

A text area's end and start icon can be clickable. We simply need to pass an icon with click handler.

http://localhost:3000
function ControlledExample() {
  const [value, setValue] = React.useState('Lorem ipsum');
  const onPress = () => {};

  return (
    <TextField aria-label="name" onChange={setValue} value={value} endIcon={
      <IconButton size="small" onPress={onPress} >
      <Icon icon="search"/>
    </IconButton>} />
  );
}

Disabled State​

Set the isDisabled prop to prevent a user from inputting text.

http://localhost:3000
<TextField aria-label="name" isDisabled />

Accessibility​

If a visible label isn't specified, an aria-label must be provided to the text area for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead.

Props​

as?The root element to be rendered