Design System

Forms - Overview

Overview
Review paths
Preview chat app surfacesOpen the demo-only `/demo/chat-shell-preview` handoff for inline, carousel, PiP, and fullscreen review.Build an inline app surfaceUse the host-friendly card, rail, and fullscreen rules.Review widget inventoryCompare Apps SDK and ChatKit references, then inspect installable KnearMe surfaces.Review artifact cardsCompare reference, decision, and generated artifact patterns.Design a shellStart with bounded chat shells, context rails, and panel states.Compare mobileReview mode changes, device framing, and recipe-level examples.Inspect tokensCheck foundation rules before composing new surfaces.

Forms

Form patterns, input states, and validation components.

Forms Subnav

Input StatesTextareaSelectCheckboxes & SwitchesPassword InputField ComponentInputGroupFormErrorAuth - LoginAuth - SignupAuth - Social LoginAuth State MatrixSettings States

Input States

Input component in all states: default, placeholder, disabled, error, and with value.

Developer details

Start from these files when you need to trace the live implementation.

src/shared/ui/input.tsx

Textarea

Multi-line text input in default, placeholder, and disabled states.

Developer details

Start from these files when you need to trace the live implementation.

src/shared/ui/textarea.tsx

Select

Dropdown select using Radix UI primitives. Default and disabled states.

Developer details

Start from these files when you need to trace the live implementation.

src/shared/ui/select.tsx

Checkboxes & Switches

Toggle controls in checked, unchecked, and disabled states.

Developer details

Start from these files when you need to trace the live implementation.

src/shared/ui/checkbox.tsx, src/shared/ui/switch.tsx

Checkboxes

Switches

Password Input

Password input with visibility toggle and requirements validation.

Developer details

Start from these files when you need to trace the live implementation.

src/shared/ui/password-input.tsx, src/shared/ui/password-requirements.tsx

  • At least 8 characters(not met)
  • Contains a letter(met)
  • Contains a number(met)
  • At least 8 characters(met)
  • Contains a letter(met)
  • Contains a number(met)
  • At least 8 characters(not met)
  • Contains a letter(not met)
  • Contains a number(not met)

Field Component

Composable field wrapper with label, description, and error states.

Developer details

Start from these files when you need to trace the live implementation.

src/shared/ui/field.tsx

This will be displayed on your public portfolio.

InputGroup

Grouped inputs with addons for prefixes, suffixes, and icons.

Developer details

Start from these files when you need to trace the live implementation.

src/shared/ui/input-group.tsx

https://
USD
$
per hour
.knearme.co

FormError

Inline error message with icon and shake animation.

Developer details

Start from these files when you need to trace the live implementation.

src/shared/ui/form-error.tsx

Login Form Pattern

A complete login form combining Input, PasswordInput, Checkbox, and Button.

Welcome back

Sign in to your account to continue

Forgot password?

Don't have an account? Sign up

Signup Form Pattern

A complete signup form with name, email, password requirements, terms checkbox, and submit.

Create your account

Start showcasing your work in minutes

  • At least 8 characters(not met)
  • Contains a letter(met)
  • Contains a number(met)

Already have an account? Sign in

Social Login States

Provider-first auth entry points with success and failure-state handoff.

Developer details

Start from these files when you need to trace the live implementation.

src/app/demo/design-system/forms/page.tsx

Provider Chooser

Let users start with their preferred identity provider.

Use email login when SSO is unavailable.

Provider Conflict

Existing account found with a different sign-in method.

Auth State Matrix

Actual auth-state UI patterns for sign-in flows, verification, and recovery transitions.

Developer details

Start from these files when you need to trace the live implementation.

src/app/demo/design-system/forms/page.tsx

Sign In - Default

Awaiting credentials.

Sign In - Invalid Credentials

Show field-level and form-level errors together.

Sign In - MFA Challenge

Second step after valid password.

6 digits

Sent to +1 (***) ***-2041. Expires in 04:52.

Recovery - Password Reset Sent

Terminal state after reset request.

Check your inbox

We sent a password reset link to [email protected]. Link expires in 30 minutes.

Settings States

Actual settings UI for profile, security, and notification preferences.

Developer details

Start from these files when you need to trace the live implementation.

src/app/demo/design-system/forms/page.tsx

Profile Settings

Editable business identity details.

.knearme.co

Security Settings

Password rotation with inline requirement guidance.

  • At least 8 characters(met)
  • Contains a letter(met)
  • Contains a number(not met)

Notification Preferences

Granular delivery controls by channel.

Team Access Review

Permission updates before inviting collaborators.