Input 10.17.4
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.
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).
"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.
Informative message holder
Informative message holder
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;
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.
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" | - |