DocsComponentsInput

Input

Primitivev1.0

Full-featured form input system with 5 visual variants, 3 sizes, icon addons, leading/trailing text addons, labels, hints, live validation, and companion Select and Textarea components.

#ff7b72">import { FqInput, FqTextarea, FqSelect } from '@/components/harlowui/primitives/fq-input'
#ff7b72">export default function ContactForm() {
  #ff7b72">return (
    <#7ee787">form>
      <#7ee787">FqInput label="Email" placeholder="you@company.com"
               leftElement={<#7ee787">MailIcon />} variant="default" />
      <#7ee787">FqSelect label="Topic" placeholder="Select a topic"
                options={[{ value: #a5d6ff">'support', label: 'Support' }]} />
      <#7ee787">FqTextarea label="Message" placeholder="How can we help?"
                  rows={4} />
    </#7ee787">form>
  )
}

Variants

Five visual styles to match any interface context.

Default

Filled

Underline

Sizes

Small

Medium (default)

Large

States

Default, focus, error, success, disabled, and read-only states with accessible messaging.

Default

Optional helper text below the field

Error

This field is required

Success

Verified successfully

Disabled

Read Only

Icons & Elements

Nest any React element inside the input on either side.

Website

Include the full URL

Amount

Text Addons

Combine text addons with input for currency, units, or protocol prefixes.

Price

USD

Domain

https://

Weight

Live Validation

Real-time inline validation with dynamic error/success states and icon feedback.

Password Toggle

Interactive right element for show/hide password with accessible labelling.

Password

Select

Native select dropdown with consistent styling, labels, and error states.

Currency

Account Type

Choose the account type that fits your needs

Priority

Priority is required

Textarea

Message

Markdown is supported

Internal Notes

Notes cannot be empty when status is rejected

Real-World Form Patterns

Production-ready form compositions using Input, Select, and Button together.

Create Account

Start your 14-day free trial

API Reference

FqInput

Prop	Type	Default	Description
`variant`	`"default" \| "filled" \| "underline" \| "error" \| "success"`	`"default"`	Visual style variant
`inputSize`	`"sm" \| "md" \| "lg"`	`"md"`	Input height and text size
`label`	`string`	-	Label text rendered above the input
`hint`	`string`	-	Helper text below the input
`error`	`string`	-	Error message, triggers error styling
`success`	`string`	-	Success message, triggers success styling
`leftElement`	`ReactNode`	-	Element positioned inside the input on the left (e.g. icon)
`rightElement`	`ReactNode`	-	Element positioned inside the input on the right (e.g. icon, button)
`leadingAddon`	`string`	-	Text addon rendered before the input (e.g. "$", "https://")
`trailingAddon`	`string`	-	Text addon rendered after the input (e.g. "USD", "kg")

FqSelect

Prop	Type	Default	Description
`options`*	`{ value: string; label: string; disabled?: boolean }[]`	-	Array of option objects
`placeholder`	`string`	-	Placeholder option text
`label`	`string`	-	Label text above the select
`hint`	`string`	-	Helper text below the select
`error`	`string`	-	Error message with destructive styling

PreviousAvatar NextCard