Input

A form input component for text entry, ready for CMS integration.

CMSPayload CMS Integration

Input fields can be configured through CMS, allowing content editors to customize labels, placeholders, help text, and validation without code changes.

CMS Demo

See how content editors configure form inputs in a CMS:

Email *

We will never share your email.

Resolved HTML Attributes:type="email"inputMode="email"autoComplete="email"autoCapitalize="none"

CMS FieldsEN

Field Type (Preset)

Automatically configures keyboard, autofill, and behavior

Label

Placeholder

Help Text

Required

Disabled

Show Advanced Options (Override Preset)

This simulates how a content editor configures form inputs in Payload CMS. The preset automatically sets the correct HTML5 attributes for optimal mobile UX.

CMS ConfigurationSimulates Payload CMS input fields with localization

Payload Form Example

// In your Payload CMS form config
export const ContactForm = {
  slug: "contact-form",
  fields: [
    {
      name: "emailField",
      type: "group",
      fields: [
        { name: "label", type: "text", localized: true, required: true },
        { name: "placeholder", type: "text", localized: true },
        { name: "helpText", type: "text", localized: true },
        {
          name: "inputType",
          type: "select",
          options: ["text", "email", "password", "number"],
          defaultValue: "text",
        },
        { name: "required", type: "checkbox" },
      ],
    },
  ],
}

Rendering the Form

import { Input } from "@mordecai-design-system/ui"

export function ContactForm({ data }) {
  const field = data.emailField
  return (
    <div className="space-y-2">
      <label className="text-sm font-medium">
        {field.label}
        {field.required && <span className="text-destructive ml-1">*</span>}
      </label>
      <Input
        type={field.inputType}
        placeholder={field.placeholder}
        required={field.required}
      />
      {field.helpText && (
        <p className="text-xs text-muted-foreground">{field.helpText}</p>
      )}
    </div>
  )
}

Basic Usage

InputA default text input

Installation

pnpm add @corew500/ui

Usage

import { Input } from "@mordecai-design-system/ui"

<Input type="text" placeholder="Enter text..." />

Examples

Default

With Label

import { Input } from "@mordecai-design-system/ui"
import { Label } from "@mordecai-design-system/ui"

<div className="grid gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>

With Button

import { Input } from "@mordecai-design-system/ui"
import { Button } from "@mordecai-design-system/ui"

<div className="flex gap-2">
  <Input placeholder="Enter your email" />
  <Button type="submit">Subscribe</Button>
</div>

File Input

<Input type="file" />

Glow Effect

Add a mouse-tracking radial gradient glow effect that follows the cursor on hover.

<Input glow placeholder="Enter email" />

The glow effect uses the --glow-color-start and --glow-input-opacity design tokens, which can be customized per theme.

Props

Prop	Type	Default	Description
`type`	enum	`text`	Input type - affects validation and mobile keyboard
`inputMode`	enum	—	Controls which keyboard to show on mobile devices Use this when you want a specific keyboard but different validation than the type provides Example: type="text" with inputMode="numeric" for credit card numbers
`enterKeyHint`	enum	—	Controls the label shown on the mobile Enter/Return key Example: "search" shows "Search", "send" shows "Send"
`autoCapitalize`	enum	—	Controls automatic text capitalization on mobile Example: "words" for names, "none" for emails
`glow`	enum	`false`	Enable mouse-tracking glow effect on hover
`size`	enum	`default`	—