input

Input

Lets the user enter a single line of text, joining a Field.

States: Default, Focus, Disabled, Invalid

Parts

Part	File	Does
Input	Input.vue	Lets the user enter a single line of text.

Styling

Part	Recipe
Input	input

Install

Writes 2 files into components/ui/input/. For agents, npx @frontic/ui docs input prints this reference as markdown; the MCP server serves the same.

npm packages: @vueuse/core; class-variance-authority; reka-ui

API reference

Input Input.vue

Lets the user enter a single line of text. Renders a <input>.

Prop	Type	Default
defaultValue	string \| number	—

modelValue	string \| number	—

class	ClassValue	—

size	'md' \| 'sm'	—

Event	Payload
update:modelValue	payload: string \| number

Data attribute	Values
data-size	'md' \| 'sm'

Recipe input	Sets
base: input	19 properties · 13 inherited
height spacing.102.5rem paddingX spacing.00rem paddingY spacing.10.25rem width `full` minWidth spacing.00rem file › display `inline-flex` backgroundColor `transparent` from @control border border.default1px solid #e4e4e7 from @control borderColor `transparent` from @control borderBottomColor colors.input#a1a1aa from @control rounded rounded.none0px from @control typography typography.control400 1rem/1.5 'Inter Variable', Inter, sans-serif from @control placeholderColor colors.muted-foreground#66666f from @control focus › borderBottom border.focus2px solid #71717a from @control invalid › borderBottomColor colors.destructive#c70009 from @control file › backgroundColor `transparent` from @control-line file › border `none` from @control-line file › textColor colors.foreground#09090b from @control-line file › typography typography.ui500 0.875rem/1.43 'Inter Variable', Inter, sans-serif from @control-line
size: sm	1 property

disabledshared state	1 property

Example