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

Anatomy

  <InsetInput>
    <InsetInput.Label>...</InsetInput.Label>
  </InsetInput>

Default

The <InsetInput /> component enhances your input fields by adding interactive floating labels.


You can also integrate the <InsetInput /> component with <Hint />, and incorporate icons in <Hint />.

"use client";

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

const Default = () => (
  <InsetInput placeholder="Placeholder" autoComplete="country-name">
    <InsetInput.Label>Label</InsetInput.Label>
  </InsetInput>
);

export default Default;

    Different states

    Configure the Disabled, Error, and Readonly states of the <InsetInput /> 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 /> if it is being used.

    "use client";

import { InsetInput, 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">
      <InsetInput placeholder="Placeholder" disabled>
        <InsetInput.Label>Label</InsetInput.Label>
      </InsetInput>
      <Hint disabled>Informative message holder</Hint>
    </div>
    <div className="w-full">
      <InsetInput placeholder="Placeholder" error>
        <InsetInput.Label>Label</InsetInput.Label>
      </InsetInput>
      <Hint error>
        <GenericInfo />
        Informative message holder
      </Hint>
    </div>
    <div className="w-full">
      <InsetInput placeholder="Placeholder" readOnly value="Read only text">
        <InsetInput.Label>Label</InsetInput.Label>
      </InsetInput>
      <Hint>Informative message holder</Hint>
    </div>
  </div>
);

export default DifferentStates;

      Text input types

      The <InsetInput /> 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 { InsetFileInput, InsetInput, 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">
        <InsetInput type="number" placeholder="e.g. 12345">
          <InsetInput.Label>Number</InsetInput.Label>
        </InsetInput>
        <InsetInput type="date" aria-label="date">
          <InsetInput.Label>Date</InsetInput.Label>
        </InsetInput>
        <InsetInput type="time" aria-label="time">
          <InsetInput.Label>Time</InsetInput.Label>
        </InsetInput>
      </div>
      <div className="flex flex-col lg:flex-row justify-around items-end w-full gap-2">
        <InsetInput type="datetime-local" aria-label="datetime-local">
          <InsetInput.Label>Datetime local</InsetInput.Label>
        </InsetInput>
        <InsetInput type="email" placeholder="e.g. [email protected]">
          <InsetInput.Label>Email</InsetInput.Label>
        </InsetInput>
        <InsetInput type="password" placeholder="Password">
          <InsetInput.Label>Password</InsetInput.Label>
        </InsetInput>
      </div>
      <div className="flex flex-col lg:flex-row justify-around items-end w-full gap-2">
        <InsetInput type="search" placeholder="e.g. Search something">
          <InsetInput.Label>Search</InsetInput.Label>
        </InsetInput>
        <InsetInput type="tel" placeholder="e.g. +372 123 4567">
          <InsetInput.Label>Tel</InsetInput.Label>
        </InsetInput>
        <InsetInput type="url" placeholder="e.g. https://domain.com">
          <InsetInput.Label>Url</InsetInput.Label>
        </InsetInput>
      </div>
      <div className="flex flex-col lg:grid lg:grid-cols-3 lg:gap-2 w-full">
        <div className="w-full">
          <InsetFileInput
            id="file-input"
            onFileUpload={fileHandler}
            onFileRemove={removeFileHandler}
            label={!file ? "Choose a file" : "File"}
            accept="image/*, .pdf"
            maxFileSize={4000 * 1024}
          />
          {file && <Hint>File uploaded: {file.name}</Hint>}
        </div>
      </div>
    </>
  );
};

export default TextInputTypes;

          Customization

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

          "use client";

import { InsetInput, 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">
      <InsetInput
        placeholder="Placeholder"
        className="bg-beerus [&_input]:text-piccolo"
      >
        <InsetInput.Label className="text-piccolo">Label</InsetInput.Label>
      </InsetInput>
      <Hint className="text-piccolo">Informative message holder</Hint>
    </div>
  </div>
);

export default Customization;

            InsetInput

            These are props specific to the InsetInput component:

            Name
            Type
            Default
            error
            		boolean-
            disabled
            		boolean-
            readOnly
            		boolean-
            className
            		string-

            InsetInput.Label

            These are props specific to the InsetInput.Label component:

            Name
            Type
            Default
            className
            		string-

            InsetFileInput

            These are props specific to the InsetFileInput component:

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