Skip to main content

Text input

Text input in Storybook
Note: There are deprecated versions of this component. Switch to a version of the docs older than 10.0.x to view their docs.

Examples​

Check out the Usage section for details about how and when to use the text input component.

Basic input​

The TextInput component only needs the label property to be displayed. Other props like placeholder, secondaryLabel, and onChange can be used to complement its behavior.

<TextInput
  label="Text input component"
  placeholder="Write what you want here"
  secondaryLabel="Free text input"
/>

Display only​

TextInput along with the other inputs, all provide the option of setting the component as display only. When this property displayOnly is set to true, the component is displayed as text, without the specific input look and feel.

<TextInput
  label="Text input component"
  placeholder="Write what you want here"
  secondaryLabel="Free text input"
  value="this is the value"
  displayOnly={true}
/>

Tooltip​

The tooltip property will make the component display the tooltip icon. When the user interacts with it, it also displays some complementary information. This property can receive text to be displayed {text: "this will be displayed when tooltip is opened"}. You can also control what specific action makes the tooltip appear by passing a second attribute trigger. This accepts the standard HTML events like pointerover, focus, and blur. By default, the tooltip is opened by clicking on the tooltip icon.

In this example, the tooltip is displayed when the mouse is over the tooltip icon.

<TextInput
  label="Text input component"
  placeholder="Write what you want here"
  secondaryLabel="Free text input"
  tooltip={{ text: 'tooltip text', trigger: 'pointerover' }}
/>

Text input validation on change​

TextInput does not provide specific validation logic but it provides a method for including developer validation and uses the stateMessages property to display any required error message.

This is an example of handling validation when the onChange event is triggered.

function TextInputValidation() {
  const [validationMessages, setValidationMessages] = useState({});

  const onChange = useCallback((e, newValue) => {
    if (!newValue || newValue.indexOf('a') == -1) {
      setValidationMessages({});
    } else {
      setValidationMessages({
        error: ['The text cannot contain `a` character'],
      });
    }
  }, []);

  return (
    <TextInput
      label="Do not accept words with 'a'"
      secondaryLabel="Will raise an error if contains 'a' character"
      stateMessages={validationMessages}
      onChange={onChange}
    />
  );
}

Controlled component​

The value property can be used for the controlled component scenario:

export function InputControlled() {
  const [updatedValue, setNewValue] = useState('first given value');

  const onChange = (e, newValue) => {
    setNewValue(newValue);
  };

  return (
    <div>
      <TextInput
        label="Enter here the value to be assigned input below"
        onChange={onChange}
      />
      <br />
      <TextInput
        label="Changes with the above"
        secondaryLabel="This cannot be manually modified"
        value={updatedValue}
      />
    </div>
  );
}

Using ref to set focus​

TextInput along with other inputs, all allow the use of a ref property to access some native behaviors. However only some features are exposed. In this case, when the button is clicked, the focus is automatically set in the following input:

export function InputRef() {
  const inputRef = useRef(null);

  const setFocus = (e) => {
    inputRef?.current?.focus();
  };

  return (
    <div>
      <Button
        label="Set focus on text input"
        onClick={setFocus}></Button>
      <TextInput
        label="Get the focus from the button"
        ref={inputRef}
      />
    </div>
  );
}