Input

Contract

Overview

Machine-readable contract from Component Spec.

component: inputexport: Inputversion: 1attributes: data-refineui=input

Anatomy

Part	data-refineui
root	input

Variants

Axis	Values
size	sm, md, lg

States

Scope	Category	Values
component	environment	forced-colors, dir, prefers-contrast

Accessibility

Slot	Element	Native
input	input	true

Layout

Property	Value
direction	logical
rtl	true

Tokens

Variant

Select a recipe variant — preview and Recipe → Tokens update together.

Recipe → Tokens

Slot bindings for variant="default" — declared in Input/style → tokens.

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
root	—	text	input.text	foregroundPrimary	primaryBlack	neutralWhite	text-refineui-alias-foreground-primary placeholder:text-refineui-alias-foreground-placeholder
root	—	placeholder	input.placeholder	foregroundPlaceholder	neutral450	neutral500	placeholder:text-refineui-alias-foreground-placeholder
root	—	background	input.background	backgroundPrimary	neutralWhite	neutral900	bg-refineui-alias-background-primary
root	—	disabledBackground	input.disabledBackground	backgroundSurfaceDisabled	neutral150	neutral850	bg-refineui-alias-background-surface-disabled
root	—	border.default	input.border.default	borderDefault	neutral300	neutral650	border-refineui-thin border-refineui-alias-border-default
root	—	border.focus	input.border.focus	borderFocus	neutral750	neutral350	border-refineui-thin border-refineui-alias-border-strong
root	—	border.error	input.border.error	borderError	red500	red500	border-refineui-thin border-refineui-alias-border-error
root	—	border.success	input.border.success	borderSuccess	green500	green500	border-refineui-thin border-refineui-alias-border-success
root	—	border.disabled	input.border.disabled	borderDisabled	neutral250	neutral700	border-refineui-thin border-refineui-alias-border-disabled

Component token trace

All paths in token-trace-v2.json prefixed with input.

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
input.background	backgroundPrimary	neutralWhite	neutral900	#FFFFFF	#1A1A1A
input.border.default	borderDefault	neutral300	neutral650	#DBDBDB	#5B5B5B
input.border.disabled	borderDisabled	neutral250	neutral700	#E0E0E0	#404040
input.border.error	borderError	red500	red500	#FF6969	#FF6969
input.border.focus	borderFocus	neutral750	neutral350	#333333	#D8D8D8
input.border.success	borderSuccess	green500	green500	#26B12D	#26B12D
input.disabledBackground	backgroundSurfaceDisabled	neutral150	neutral850	#F0F0F0	#222222
input.placeholder	foregroundPlaceholder	neutral450	neutral500	#BBBBBB	#A4A4A4
input.text	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Input } from "@refineui/react";

<Input placeholder="Enter your name" />

<Input
  size="lg"
  error={hasError}
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

<Input fullWidth placeholder="Full width input" />

API Reference

Prop	Default	Type	Description
size	"md"	"sm" | "md" | "lg"	Input size tier.
error	false	boolean	Shows error state styling.
success	false	boolean	Shows success state styling.
fullWidth	false	boolean	Stretches to full parent width.
disabled	false	boolean	Disables interaction.