Text Input

InputText

<InputText name="name" title="title" />

InputText - with Translation

import { useState } from "react";
import InputText from "~/components/ui/input/InputText";

export default function PreviewInputTextWithTranslation() {
  const [valid, setValid] = useState("shared.hi");
  const [invalid, setInvalid] = useState("shared.invalid.i18n.key");
  return (
    <>
      <InputText name="name" title="Valid i18n key" value={valid} setValue={setValid} withTranslation />
      <InputText name="name" title="Invalid i18n key" value={invalid} setValue={setInvalid} withTranslation />
    </>
  );
}

InputText - with Hint

<InputText name="name" title="Title" hint={<span className="text-red-500">Hint text</span>} />

InputText - with all Options

import InputText from "~/components/ui/input/InputText";

export default function PreviewInputTextWithAllOptions() {
  const [value, setValue] = useState(0);
  return <InputText name="name" title="Title" value={value} setValue={setValue} min={0} max={10} required step="0.01" />;
}