Input / Textarea
Form inputs used across the application. Text inputs from SetupForm, auto-growing textarea from InputBar, and the InputBar form wrapper with focus-within ring.
Text Input (single line)
Standard text input used for company context in SetupForm. Classes: rounded-lg border border-border bg-card px-3.5 py-2.5 text-sm.
Empty (placeholder)
Filled
Focused
Disabled
With Error
This field is required.
Textarea (multi-line)
Standard textarea used for custom prompt in SetupForm. Classes: resize-none rounded-lg border border-border bg-card px-3.5 py-2.5 text-sm.
Empty
Filled
InputBar Form Wrapper
The interview InputBar wraps a textarea inside a rounded-2xl border container with focus-within ring transition. The textarea auto-grows via JS up to 120px max height.
Listening (empty)
Thinking (disabled)
Speaking (disabled)
Filled (ready to send)
Input primitive (shadcn/ui)
The new shadcn/ui Input component (Base UI InputPrimitive), added via `npx shadcn add input` in the project's base-nova style. Powers the display_name field in ProfileSettings — pair with Label for accessible forms.
| Prop | Type | Default | Description |
|---|---|---|---|
| type | string | "text" | HTML input type (text, email, etc.) |
| disabled | boolean | false | Disables the input (opacity 50%, no pointer events) |
| aria-invalid | boolean | false | Marks the field as invalid — applies the destructive border/ring |
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn