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.

The 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).


### Default example

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

### Example email type with placeholder

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

### Invalid state

Error state, useful for applying form validation.

```jsx live=true
    <TextInput
      isValid={false}
      value={"Sample Input"}
      type="text"
      onChange={e => {
        // business logic
      }}
    />
```