🚧 This website is work in progress 👷
Components
Forms
TextInput

TextInput

Text inputs enable the user to interact with and input data. Use when the application requires long-form content from the user.

Import statement

import { TextInput } from "@wfp/react"

Usage

Editable Example

<TextInput
  type="text"
  name="inputname"
  helperText="Optional helperText"
  labelText="The labelText"
  placeholder="placeholder"
/>;

Password input

Password input is a sub-variant of text input. It is used to collect private data and will hide the characters as a user enters them. When using a password input be sure to provide detailed helper text listing any requirements related to the data format, such as types of characters allowed or date structure.

Editable Example

<TextInput
  type="password"
  name="inputname"
  helperText="Password must contain at least 12 characters"
  labelText="Password"
/>;

react-hook-form example

Expand code

Editable Example

const FormExample = () => {
  const [defaultValues, setDefaultValues] = useState(
    {}
  );
  const {
    control,
    register,
    handleSubmit,
    watch,
    reset,
  } = useForm({ defaultValues });
  const [data, setData] = useState({});

  const setDefaultValuesFunc = (e) => {
    console.log(e.target.value);
    try {
      const values = JSON.parse(e.target.value);
      setDefaultValues(values);
    } catch (e) {
      console.log(e);
    }
  };

  const resetInputs = () => {
    reset(defaultValues);
  };
  const currentValues = watch();

  return (
    <>
      <form
        onSubmit={handleSubmit((data) =>
          setData(data)
        )}
      >
        <>
          <TextInput
            labelText="The uncontrolled Input"
            helperText="Optional helperText"
            labelA="Off"
            labelB="On"
            {...register("inputname")}
          />

          <Controller
            name="inputnameB"
            control={control}
            render={({ field }) => {
              return (
                <TextInput
                  labelText="The controlled Input"
                  helperText="Optional helperText"
                  labelA="Off"
                  labelB="On"
                  {...field}
                  onChange={(e) =>
                    field.onChange(e.target.value)
                  }
                  value={field.value}
                />
              );
            }}
          />
        </>
        <Button type="submit">Submit</Button>{" "}
        <Button onClick={resetInputs} kind="secondary">
          Reset here
        </Button>
        <div className="debug">
          <h4>Submitted form data</h4>
          <pre>{JSON.stringify(data, null, 2)}</pre>

          <h4>Current values</h4>
          <pre>
            {JSON.stringify(currentValues, null, 2)}
          </pre>

          <TextInput
            labelText="Default values (editable)"
            defaultValue={JSON.stringify(
              defaultValues
            )}
            onChange={setDefaultValuesFunc}
          />
        </div>
      </form>
    </>
  );
};

render(<FormExample />);

Related

Reference

On this page

References