Input

Text input with floating label, prefix/suffix slots, clear button, validation states, and two sizes (md/lg).

forms v0.1.0

Playground

Examples

Floating labels

<cg-stack gap="sm" style="max-width: 320px;"><cg-input label="Full Name" placeholder="John Doe"></cg-input><cg-input label="Email" type="email" placeholder="you@example.com" value="john@example.com"></cg-input><cg-input label="Password" type="password"></cg-input></cg-stack>

Sizes

<cg-stack gap="sm" style="max-width: 320px;"><cg-input label="Medium" size="md" placeholder="md (default)"></cg-input><cg-input label="Large" size="lg" placeholder="lg"></cg-input></cg-stack>

States

<cg-stack gap="sm" style="max-width: 320px;"><cg-input label="Error" error helper="This field is required" value="bad@"></cg-input><cg-input label="Success" success helper="Looks good!" value="john@example.com"></cg-input><cg-input label="Disabled" disabled value="Cannot edit"></cg-input><cg-input label="Readonly" readonly value="Read only value"></cg-input><cg-input label="Loading" loading value="Validating..."></cg-input></cg-stack>

Clearable + counter

<cg-input label="Bio" clearable maxlength="100" placeholder="Tell us about yourself" value="Hello world" style="max-width: 320px;"></cg-input>

Import

import { CgInput } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-input';

Per-component imports ship only that component (~8 kB gzip).

API Reference

Prop	Type	Default	Description
`label`	string	""	Floating label text — shrinks and rises on focus
`value`	string	""	Input value
`placeholder`	string	—	Placeholder text (shown when label is floated)
`type`	"text" \| "email" \| "password" \| "number" \| "url" \| "search" \| "tel"	"text"	Input type
`size`	"md" \| "lg"	"md"	Input size — md (48px), lg (56px)
`rounded`	"none" \| "sm" \| "md" \| "lg"	"lg"	Border radius — sm (8px), md (12px), lg (16px, default)
`error`	boolean	false	Error state — red border and focus ring
`success`	boolean	false	Success state — green border and focus ring
`loading`	boolean	false	Loading state — shows spinner, disables input
`disabled`	boolean	false	Disabled state
`readonly`	boolean	false	Readonly state — dashed border
`clearable`	boolean	false	Show clear button when value is non-empty
`helper`	string	—	Helper text below the input
`maxlength`	number	0	Max character count (shows counter when > 0)

Events

Event	Detail	Description
`cg-input`	{value: string}	On every input change
`cg-clear`	{}	When clear button is clicked