MSQ Logo

Input

A UI element that accepts text data from the user. Supports various states, sizes, and types including leading text, trailing buttons, dropdowns, and text areas.

Installation

The Input component is part of the design system. Import it from the UI package.

import { Input } from "@/components/ui/input"

Usage

Use Input with label, placeholder, state, and optional leading/trailing content. Copy the example below to get started.

States

Input fields have different visual states: placeholder, focused, typing, error, and disabled.

All States

This field is required

<Input label="Label" placeholder="Placeholder" />
<Input label="Label" placeholder="Placeholder" status="focused" />
<Input label="Label" placeholder="Placeholder" status="typing" />
<Input label="Label" placeholder="Placeholder" status="error" errorMessage="This field is required" />
<Input label="Label" placeholder="Placeholder" status="disabled" disabled />

Sizes

<Input size="md" label="Label" placeholder="Placeholder" />
<Input size="lg" label="Label" placeholder="Placeholder" />

Types

Input fields can have different configurations: default, leading text, trailing button, dropdown, and text area.

Medium Size

Error message

Large Size

http://
s@h

Search Input

Specialized input field for search functionality with a search icon.

States

Search
Search
Search
Search

Invalid search query

<Input 
  placeholder="Search for inquiry" 
  type="search"
/>

API Reference

The Input component provides a text field with label, states, sizes, and optional leading/trailing content. See the interface below for full prop details.

interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
  size?: "md" | "lg"
  status?: "placeholder" | "focused" | "typing" | "error" | "disabled"
  type?: "default" | "leading-text" | "trailing-button" | "dropdown" | "text-area" | "search"
  leadingText?: string
  trailingButton?: React.ReactNode
  dropdownValue?: string
  errorMessage?: string
  helperText?: string
  label?: string
  searchIcon?: string
}