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

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 { InsetInput } from "@heathmont/moon-core-tw";

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

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-