Input 10.16.0

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.

    "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).

      "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.

        "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;

          TextInput types

          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.

          "use client";

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

const TextInputTypes = () => (
  <>
    <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>
  </>
);

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.

              "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
                		text
                placeholder
                		string-
                error
                		boolean-
                disabled
                		boolean-
                readOnly
                		boolean-
                dir
                		"ltr" | "rtl" | "auto"-
                className
                		string-