components / 04

marked input

the field stays native. cheez draws intent, focus, and correction.

shadcnnpx shadcn@latest add berkantay/cheez/marked-input

live

playground

0 characters

emailwe only use this for replies

size

type

character

focus mark

hover mark

focus ink

hover ink

field

<MarkedInput
  type="email"
  label="email"
  placeholder="you@example.com"
  inputSize="medium"
  mark="rounded-box"
  interactionMark="short-underline"
  character="rushed"
  markColor="#8f74ff"
  interactionColor="#35d9ff"
  revealable={false}
  error={undefined}
/>

behavior

states

native behavior, human feedback

idle

name

hover

name

focus

name

filled

name

invalid

emailenter a valid email

disabled

name

read only

account

adornments

website

large

project

patterns

common fields

ready for real forms

emailbrowser email autofill stays available

passworduse show or hide without losing focus

website

composition

small form

labels and messages wire themselves

reference

api

all native input props are forwarded

part	prop	type	default	purpose
Input	`label`	`ReactNode`	`—`	connected visible label
Input	`description`	`ReactNode`	`—`	accessible helper text
Input	`error`	`ReactNode`	`—`	persistent invalid state
Input	`value`	`string \| number`	`—`	controlled native value
Input	`defaultValue`	`string \| number`	`—`	uncontrolled initial value
Input	`onChange`	`function`	`—`	native change handler
Input	`inputSize`	`"small" \| "medium" \| "large"`	`"medium"`	control scale
Input	`mark`	`CheezType`	`"rounded-box"`	focus mark
Input	`interactionMark`	`CheezType`	`"short-underline"`	hover mark
Input	`errorMark`	`CheezType`	`"wavy-underline"`	invalid mark
Input	`markColor`	`string`	`"#ff4f2e"`	focus ink
Input	`interactionColor`	`string`	`markColor`	hover ink
Input	`errorColor`	`string`	`"#ff5fa2"`	invalid ink
Input	`character`	`"calm" \| "rushed" \| "chaotic"`	`"rushed"`	drawing personality
Input	`marked`	`boolean`	`undefined`	controlled mark preview
Input	`filled`	`boolean`	`auto`	override filled presentation
Input	`leading`	`ReactNode`	`—`	decorative leading content
Input	`trailing`	`ReactNode`	`—`	decorative trailing content
Input	`revealable`	`boolean`	`false`	add a password visibility toggle
Input	`showPasswordLabel`	`string`	`"show password"`	accessible reveal label
Input	`hidePasswordLabel`	`string`	`"hide password"`	accessible conceal label
Input	`disabled`	`boolean`	`false`	native disabled state
Input	`readOnly`	`boolean`	`false`	native read-only state

behavior notes

the rendered control is always a native input
hover uses a brief low-priority mark
focus draws a complete enclosure
invalid feedback persists until the error is removed
labels, descriptions, and errors receive connected ids
disabled and read-only fields never animate
controlled and uncontrolled values are both supported
password reveal keeps pointer focus in the native field
email, URL, and password autocomplete remains native