Input

The Input is a UI control that allows users to enter and edit text, typically used for collecting user-provided information.

Source Code

uikit-react-core

Controlled

You can control the value of the HvInput by using the value/onChange props, similarly to the <input> element.

Value

The value will be uppercased

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState("");


  return (
    <div className="flex gap-xs items-end">
      <HvInput
        label="Value"
        description="The value will be uppercased"
        placeholder="Enter value"
        value={value}
        onChange={(event, newValue) => setValue(newValue.toUpperCase())}
      />
      <HvButton
        variant="subtle"
        onClick={() => setValue(Math.random().toString(36).slice(2))}
      >
        Random value
      </HvButton>
      <HvButton variant="subtle" onClick={() => setValue("")}>
        Clear value
      </HvButton>
    </div>
  );
}

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState("");

  return (
    <div className="flex gap-xs items-end">
      <HvInput
        label="Value"
        description="The value will be uppercased"
        placeholder="Enter value"
        value={value}
        onChange={(event, newValue) => setValue(newValue.toUpperCase())}
      />
      <HvButton
        variant="subtle"
        onClick={() => setValue(Math.random().toString(36).slice(2))}
      >
        Random value
      </HvButton>
      <HvButton variant="subtle" onClick={() => setValue("")}>
        Clear value
      </HvButton>
    </div>
  );
}

Validation

Greeting

You must input `hello`

<HvInput
  label="Greeting"
  description="You must input `hello`"
  placeholder="Insert `hello`"
  required
  showValidationIcon
  minCharQuantity={2}
  maxCharQuantity={10}
  validation={(value) => value.includes("hello")}
  validationMessages={{
    maxCharError: "The value is too long",
    minCharError: "The value is too short",
    requiredError: "A value is required",
    error: "Value must contain 'hello'", // default error message
  }}
  onBlur={(event, value, validationState) => {
    console.log(value, validationState);
  }}
/>

<HvInput
  label="Greeting"
  description="You must input `hello`"
  placeholder="Insert `hello`"
  required
  showValidationIcon
  minCharQuantity={2}
  maxCharQuantity={10}
  validation={(value) => value.includes("hello")}
  validationMessages={{
    maxCharError: "The value is too long",
    minCharError: "The value is too short",
    requiredError: "A value is required",
    error: "Value must contain 'hello'", // default error message
  }}
  onBlur={(event, value, validationState) => {
    console.log(value, validationState);
  }}
/>

Input props

Use inputProps to inject custom props to the underlying <input> element.

Description

Short description (max 25 characters)

<HvInput
  label="Description"
  placeholder="Insert a short description"
  description="Short description (max 25 characters)"
  inputProps={{
    minLength: 5,
    maxLength: 25,
  }}
/>

<HvInput
  label="Description"
  placeholder="Insert a short description"
  description="Short description (max 25 characters)"
  inputProps={{
    minLength: 5,
    maxLength: 25,
  }}
/>

Custom Variants

You can use inputProps to configure custom HTML input types . This can be useful for providing a better mobile experience.

Number

Date

Datetime-local

Time

import { useRef } from "react";


export default function Demo() {
  const timeRef = useRef<HTMLInputElement>(null);
  const dateRef = useRef<HTMLInputElement>(null);
  const dateTimeRef = useRef<HTMLInputElement>(null);


  return (
    <div className="flex gap-sm">
      <HvInput
        label="Number"
        className="min-w-80px"
        inputProps={{ type: "number", min: 10, max: 99 }}
      />
      <HvInput
        ref={dateRef}
        label="Date"
        inputProps={{ type: "date" }}
        endAdornment={
          <HvAdornment
            icon={<Calendar />}
            onClick={() => dateRef.current?.showPicker()}
          />
        }
      />
      <HvInput
        ref={dateTimeRef}
        label="Datetime-local"
        inputProps={{ type: "datetime-local", step: 1 }}
        endAdornment={
          <HvAdornment
            icon={<Calendar />}
            onClick={() => dateTimeRef.current?.showPicker()}
          />
        }
      />
      <HvInput
        ref={timeRef}
        label="Time"
        inputProps={{ type: "time", step: 1 }}
        endAdornment={
          <HvAdornment
            icon={<Time />}
            onClick={() => timeRef.current?.showPicker()}
          />
        }
      />
    </div>
  );
}

import { useRef } from "react";

export default function Demo() {
  const timeRef = useRef<HTMLInputElement>(null);
  const dateRef = useRef<HTMLInputElement>(null);
  const dateTimeRef = useRef<HTMLInputElement>(null);

  return (
    <div className="flex gap-sm">
      <HvInput
        label="Number"
        className="min-w-80px"
        inputProps={{ type: "number", min: 10, max: 99 }}
      />
      <HvInput
        ref={dateRef}
        label="Date"
        inputProps={{ type: "date" }}
        endAdornment={
          <HvAdornment
            icon={<Calendar />}
            onClick={() => dateRef.current?.showPicker()}
          />
        }
      />
      <HvInput
        ref={dateTimeRef}
        label="Datetime-local"
        inputProps={{ type: "datetime-local", step: 1 }}
        endAdornment={
          <HvAdornment
            icon={<Calendar />}
            onClick={() => dateTimeRef.current?.showPicker()}
          />
        }
      />
      <HvInput
        ref={timeRef}
        label="Time"
        inputProps={{ type: "time", step: 1 }}
        endAdornment={
          <HvAdornment
            icon={<Time />}
            onClick={() => timeRef.current?.showPicker()}
          />
        }
      />
    </div>
  );
}

Form

Inputs are form elements and oftentimes used within a form. You can use the form prop to associate the input with a form.

export default function Demo() {
  return (
    <form
      className="flex gap-sm"
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        const data = Object.fromEntries(formData);
        alert(JSON.stringify(data));
      }}
    >
      <HvInput required name="firstName" label="First name" />
      <HvInput required name="lastName" label="Last name" />
      <HvButton type="submit" variant="subtle" className="mt-26px">
        Submit
      </HvButton>
    </form>
  );
}

export default function Demo() {
  return (
    <form
      className="flex gap-sm"
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        const data = Object.fromEntries(formData);
        alert(JSON.stringify(data));
      }}
    >
      <HvInput required name="firstName" label="First name" />
      <HvInput required name="lastName" label="Last name" />
      <HvButton type="submit" variant="subtle" className="mt-26px">
        Submit
      </HvButton>
    </form>
  );
}

Adornments

You can use startAdornment and endAdornment to create custom input layouts, such as prefixes and suffixes.

Subdomain

https://

.hitachivantara.com

Choose your application subdomain

<HvInput
  name="subdomain"
  label="Subdomain"
  description="Choose your application subdomain"
  placeholder="Enter sub-domain"
  className="w-400px"
  startAdornment={
    <span className="content-center bg-bgContainer border-border border-r px-xxs">
      https://
    </span>
  }
  endAdornment={
    <span className="h-full content-center bg-bgContainer border-border border-l px-xxs">
      .hitachivantara.com
    </span>
  }
  validation={(value) => !/[^a-zA-Z0-9-]/.test(value)}
  validationMessages={{ error: "Invalid subdomain" }}
/>

<HvInput
  name="subdomain"
  label="Subdomain"
  description="Choose your application subdomain"
  placeholder="Enter sub-domain"
  className="w-400px"
  startAdornment={
    <span className="content-center bg-bgContainer border-border border-r px-xxs">
      https://
    </span>
  }
  endAdornment={
    <span className="h-full content-center bg-bgContainer border-border border-l px-xxs">
      .hitachivantara.com
    </span>
  }
  validation={(value) => !/[^a-zA-Z0-9-]/.test(value)}
  validationMessages={{ error: "Invalid subdomain" }}
/>

Autocomplete

Inputs can have a autocomplete suggestions using the suggestionListCallback.

Animal

Animals starting with 'A'

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState("");
  return (
    <HvInput
      label="Animal"
      classes={{
        root: "w-240px",
        suggestionList: "max-h-220px overflow-y-auto",
      }}
      description="Animals starting with 'A'"
      placeholder="Ant"
      value={value}
      onChange={(_e, val) => setValue(val)}
      suggestionListCallback={(val) => {
        if (!val) return null;
        const animals = animalsStartingWithA.filter((animal) =>
          animal.toUpperCase().startsWith(val.toUpperCase()),
        );


        return animals.length === 0
          ? null
          : animals.map((animal, idx) => ({ id: idx, label: animal }));
      }}
    />
  );
}


const animalsStartingWithA = [
  "Ant",
  "Alligator",
  "Alpaca",
  "Armadillo",
  "Anaconda",
  "Angelfish",
  "Antelope",
  "Axolotl",
  "Aardvark",
  "Albatross",
];

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState("");
  return (
    <HvInput
      label="Animal"
      classes={{
        root: "w-240px",
        suggestionList: "max-h-220px overflow-y-auto",
      }}
      description="Animals starting with 'A'"
      placeholder="Ant"
      value={value}
      onChange={(_e, val) => setValue(val)}
      suggestionListCallback={(val) => {
        if (!val) return null;
        const animals = animalsStartingWithA.filter((animal) =>
          animal.toUpperCase().startsWith(val.toUpperCase()),
        );

        return animals.length === 0
          ? null
          : animals.map((animal, idx) => ({ id: idx, label: animal }));
      }}
    />
  );
}

const animalsStartingWithA = [
  "Ant",
  "Alligator",
  "Alpaca",
  "Armadillo",
  "Anaconda",
  "Angelfish",
  "Antelope",
  "Axolotl",
  "Aardvark",
  "Albatross",
];

Accessibility

Inputs not using the visual label prop should instead provide an aria-label property.

<HvInput aria-label="First name" placeholder="Insert first name" />

<HvInput aria-label="First name" placeholder="Insert first name" />