Text Field (with inline labels)

The text field element by default renders as an input with type="text".

Optionally a placeholder prop can be provided, while still rendering well with the inline label.

TextField as Text Area

Basic example

import { useState } from "react";
import { TextField } from "lite-react-ui";
import "lite-react-ui/dist/style.css";

export default function App() {
  const [value, setValue] = useState("hello world");
  return (
    <div className="App">
      <TextField
        type="text"
        label="label"
        placeholder="placeholder text"
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />

      <TextField
        type="textarea"
        label="label"
        placeholder="placeholder text"
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
    </div>
  );
}