Input

A text input box is a graphical control element intended to enable the user to input text information to be used by the software.

Source Code

uikit-react-core

NamePlease enter your name

label

description

required

readOnly

disabled

<HvInput label="Name" description="Please enter your name" required />

<HvInput label="Name" description="Please enter your name" required />

Controlled

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

ValueThe 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

GreetingYou must input `hello`

<HvInput
  label="Greeting"
  description="You must input `hello`"
  placeholder="Insert `hello`"
  // validation
  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: "You didn't write 'hello'", // default error message
  }}
  onBlur={(event, value, validationState) => {
    console.log(value, validationState);
  }}
/>

<HvInput
  label="Greeting"
  description="You must input `hello`"
  placeholder="Insert `hello`"
  // validation
  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: "You didn't write '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.

DescriptionShort 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 (
    <>
      <HvInput
        label="Number"
        className="min-w-80px"
        inputProps={{ type: "number", min: 10, max: 99 }}
      />
      <HvInput
        ref={dateRef}
        label="Date"
        inputProps={{ type: "date" }}
        endAdornment={
          <Calendar onClick={() => dateRef.current?.showPicker()} />
        }
      />
      <HvInput
        ref={dateTimeRef}
        label="Datetime-local"
        inputProps={{ type: "datetime-local", step: 1 }}
        endAdornment={
          <Calendar onClick={() => dateTimeRef.current?.showPicker()} />
        }
      />
      <HvInput
        ref={timeRef}
        label="Time"
        inputProps={{ type: "time", step: 1 }}
        endAdornment={<Time onClick={() => timeRef.current?.showPicker()} />}
      />
    </>
  );
}

import { useRef } from "react";

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

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

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>
  );
}

Prefix and Suffix

If you need to apply a custom layout, e.g. for providing a prefix or suffix, you can and should externalize both the label (HvLabel) and description (HvInfoMessage).

SubdomainChoose your application subdomain

https://

.lumada.org

<div className="w-400px">
  <div className="flex items-start">
    <HvLabel label="Subdomain" htmlFor="subdomain-input" />
    <HvInfoMessage id="subdomain-description">
      Choose your application subdomain
    </HvInfoMessage>
  </div>
  <div className="flex gap-xs w-full items-baseline">
    <div>https://</div>
    <HvInput
      id="subdomain"
      name="subdomain"
      aria-describedby="subdomain-description"
      placeholder="Enter sub-domain"
      className="grow-1"
      validation={(value) => !/[^a-zA-Z0-9-]/.test(value)}
      validationMessages={{ error: "Invalid subdomain" }}
    />
    <div>.lumada.org</div>
  </div>
</div>

<div className="w-400px">
  <div className="flex items-start">
    <HvLabel label="Subdomain" htmlFor="subdomain-input" />
    <HvInfoMessage id="subdomain-description">
      Choose your application subdomain
    </HvInfoMessage>
  </div>
  <div className="flex gap-xs w-full items-baseline">
    <div>https://</div>
    <HvInput
      id="subdomain"
      name="subdomain"
      aria-describedby="subdomain-description"
      placeholder="Enter sub-domain"
      className="grow-1"
      validation={(value) => !/[^a-zA-Z0-9-]/.test(value)}
      validationMessages={{ error: "Invalid subdomain" }}
    />
    <div>.lumada.org</div>
  </div>
</div>

Autocomplete

Inputs can have a autocomplete suggestons using the suggestionListCallback.

AnimalAnimals 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" />

CheckBox Loading