Input 10.17.4

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

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

                  FileInput

                  These are props specific to the FileInput component:

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