VoiceMock

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

Design a feature that helps creators on Instagram better understand their audience engagement patterns and optimize their content strategy.

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)

I think the key metric to focus on would be daily active users because...

Need a design system like this?

I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.