Input 10.18.1

ARIA

RTL

Text input fields allow users to enter text and can be used to collect user feedback or enter information in data entry forms.

These types of input fields are used on their own, or in combination with other inputs such as number entry, date picker, etc.

Default

"use client";

import { Input } from "@heathmont/moon-core-tw";

const Default = () => <Input aria-label="default" />;

export default Default;

With placeholder, label and hint

You can easily integrate the <Input /> component with <Label /> and <Hint />, and incorporate icons in <Hint />.

To include a placeholder in <Input />, simply pass the placeholder property.

Label

Informative message holder

"use client";

import { Input, Label, Hint } from "@heathmont/moon-core-tw";
import { GenericInfo } from "@heathmont/moon-icons-tw";

const WithHintAndLabel = () => (
  <div className="w-full">
    <Label htmlFor="with-additions">Label</Label>
    <Input type="text" placeholder="With label and hint" id="with-additions" />
    <Hint>
      <GenericInfo />
      Informative message holder
    </Hint>
  </div>
);

export default WithHintAndLabel;

Sizes

<Input /> supports three different sizes. By default, if not specified by the prop size, it renders as medium.

The possible values are sm (small), md (medium) and lg (large).

Small

Medium (default)

Large

"use client";

import { Input, Label } from "@heathmont/moon-core-tw";

const Sizes = () => (
  <div className="flex flex-col lg:flex-row justify-around items-start w-full gap-2">
    <div className="w-full">
      <Label htmlFor="size-sm" size="sm">
        Small
      </Label>
      <Input type="text" size="sm" placeholder="Placeholder" id="size-sm" />
    </div>
    <div className="w-full">
      <Label htmlFor="size-md">Medium (default)</Label>
      <Input type="text" placeholder="Placeholder" id="size-md" />
    </div>
    <div className="w-full">
      <Label htmlFor="size-lg">Large</Label>
      <Input type="text" size="lg" placeholder="Placeholder" id="size-lg" />
    </div>
  </div>
);

export default Sizes;

Different states

Configure the Disabled, Error, and Readonly states of the <Input /> component using the disabled, error, and readonly properties, respectively.

Ensure that for the Disabled and Error states, the corresponding properties are also applied to <Hint /> and <Label /> if they are being used.

Label

Informative message holder

Label

Informative message holder

Label

Informative message holder

"use client";

import { Input, Label, Hint } from "@heathmont/moon-core-tw";
import { GenericInfo } from "@heathmont/moon-icons-tw";

const DifferentStates = () => (
  <div className="flex flex-col lg:flex-row justify-around items-start w-full gap-2">
    <div className="w-full">
      <Label htmlFor="disabled-state" disabled>
        Label
      </Label>
      <Input type="text" placeholder="Disabled" id="disabled-state" disabled />
      <Hint disabled>Informative message holder</Hint>
    </div>
    <div className="w-full">
      <Label htmlFor="error-state">Label</Label>
      <Input type="text" placeholder="Error" id="error-state" error />
      <Hint error>
        <GenericInfo />
        Informative message holder
      </Hint>
    </div>
    <div className="w-full">
      <Label htmlFor="readonly-state">Label</Label>
      <Input
        type="text"
        placeholder="Placeholder"
        id="readonly-state"
        value="Read only text"
        readOnly
      />
      <Hint>Informative message holder</Hint>
    </div>
  </div>
);

export default DifferentStates;

The <Input /> component supports various HTML input types like date, datetime-local, email, number, password, search, tel, text, time, and url. Just use the type property to define the required type. If not specified, the default type is text.

Number

Date

Time

Datetime local

Password

Tel

Url

File

"use client";

import { FileInput, Input, Label, Hint } from "@heathmont/moon-core-tw";
import { useState } from "react";

const TextInputTypes = () => {
  const [file, setFile] = useState<File>();
  const fileHandler = (file: File | undefined) => {
    setFile(file);
  };

  const removeFileHandler = () => {
    setFile(undefined);
  };

  return (
    <>
      <div className="flex flex-col lg:flex-row justify-around items-end w-full gap-2">
        <div className="w-full">
          <Label>Number</Label>
          <Input type="number" placeholder="e.g. 12345" />
        </div>

        <div className="w-full">
          <Label>Date</Label>
          <Input type="date" aria-label="Date" />
        </div>
        <div className="w-full">
          <Label htmlFor="time-type">Time</Label>
          <Input type="time" id="time-type" />
        </div>
      </div>
      <div className="flex flex-col lg:flex-row justify-around items-end w-full gap-2">
        <div className="w-full">
          <Label htmlFor="datetimelocal-type">Datetime local</Label>
          <Input type="datetime-local" id="datetimelocal-type" />
        </div>
        <div className="w-full">
          <Label>Email</Label>
          <Input type="email" placeholder="e.g. [email protected]" />
        </div>
        <div className="w-full">
          <Label>Password</Label>
          <Input type="password" placeholder="Password" />
        </div>
      </div>
      <div className="flex flex-col lg:flex-row justify-around items-end w-full gap-2">
        <div className="w-full">
          <Label>Search</Label>
          <Input type="search" placeholder="e.g. Search something" />
        </div>
        <div className="w-full">
          <Label>Tel</Label>
          <Input type="tel" placeholder="e.g. +372 123 4567" />
        </div>
        <div className="w-full">
          <Label>Url</Label>
          <Input type="url" placeholder="e.g. https://domain.com" />
        </div>
      </div>
      <div className="flex flex-col lg:grid lg:grid-cols-3 gap-2 w-full">
        <div>
          <Label>File</Label>
          <FileInput
            id="file-input"
            onFileUpload={fileHandler}
            onFileRemove={removeFileHandler}
            placeholder="Choose a file"
            accept=".jpg, .png, video/mp4, .pdf"
            maxFileSize={4000 * 1024}
          />
          {file && <Hint>File uploaded: {file.name}</Hint>}
        </div>
      </div>
    </>
  );
};

export default TextInputTypes;

Controlling an input with a state variable

You can manage the value of <Input /> using useState.

Result: FFFFFF

"use client";

import { Input } from "@heathmont/moon-core-tw";
import { useState } from "react";

const ControllingAnInput = () => {
  const [color, setColor] = useState("FFFFFF");
  return (
    <div className="w-full">
      <Input
        aria-label="controlled"
        value={color}
        onChange={(e) => {
          setColor(e.target.value);
        }}
      />
      <p className="text-moon-18 pt-2">
        <b>Result:</b> {color}
      </p>
    </div>
  );
};

export default ControllingAnInput;

Custom styles

Enhance <Input />, <Label />, and <Hint /> components by utilizing the className property for customization.

Customized label

Customized helper text

"use client";

import { Input, Label, Hint } from "@heathmont/moon-core-tw";

const Customization = () => (
  <div className="flex flex-col lg:flex-row justify-around items-end w-full gap-2">
    <div className="w-full">
      <Label htmlFor="custom-style" className="text-piccolo">
        Customized label
      </Label>
      <Input
        type="text"
        placeholder="Placeholder"
        id="custom-style"
        className="bg-beerus text-piccolo"
      />
      <Hint className="text-piccolo">Customized helper text</Hint>
    </div>
  </div>
);

export default Customization;

Input

These are props specific to the Input component:

Name	Type	Default
size	"sm" \| "md" \| "lg"	md
type	enum	text
placeholder	string	-
error	boolean	-
disabled	boolean	-
readOnly	boolean	-
dir	"ltr" \| "rtl" \| "auto"	-
className	string	-

FileInput

These are props specific to the FileInput component:

Name	Type	Default
accept	string	-
maxFileSize	number	100 MB
onFileUpload	(file: File) => void	-
onFileRemove	"() => void"	-
initFile	"File"	-
errorMessages	"Errors"	-

Input 10.18.1

Default

With placeholder, label and hint

Sizes

Different states

TextInput types

Controlling an input with a state variable

Custom styles

Input

FileInput