vcc-ui/_src/components/text-input/README.md

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

TextInput component is controlled component input field that handles user events.
For more on controlled components [see here](https://reactjs.org/docs/forms.html#controlled-components)
To set the types, import the `{TEXT_INPUT_TYPES}` constant, which includes the available text types:

```jsx static
TEXT_INPUT_TYPES.TELEPHONE,
TEXT_INPUT_TYPES.TEXT,
TEXT_INPUT_TYPES.EMAIL,
TEXT_INPUT_TYPES.SEARCH,
TEXT_INPUT_TYPES.PASSWORD,
TEXT_INPUT_TYPES.NUMBER
```

### Default example

```jsx live=true
() => {
  const [value, setValue] = React.useState("C30");
  return (
    <TextInput
      value={value}
      onChange={e => {
        setValue(e.target.value);
      }}
    />
  );
};
```

### Example email type text input with placeholder

```jsx live=true
() => {
  const [value, setValue] = React.useState("");
  return (
    <TextInput
      value={value}
      placeholder="name.surname@volvocars.com"
      type={TEXT_INPUT_TYPES.EMAIL}
      onChange={e => {
        setValue(e.target.value);
      }}
    />
  );
};
```

### Changelog

- *Added in version 0.0.45*