Chapter 4 › Lesson 16

16. Create Input Variants (Empty, Filled, Active, Error)

Skills: Create input component; Add variant property e.g. State; Empty state (grey border, placeholder text); Filled state (text visible, default border); Active state (blue border, cursor visible); Error state (red border, error message text)

An input field has different visual states: empty (default), active (focus), filled (with content), and error. You'll create these as component variants so you can switch between them.

16. Create Input Variants (Empty, Filled, Active, Error)
Figure: Four input states: Empty (grey border), Active (blue border), Filled (text entered), Error (red border, red error message).

Step-by-step

  1. Select your input component and add a variant property called "State" with values: "Empty", "Active", "Filled", "Error"
  2. Leave the Empty variant as-is (grey border, placeholder text shown)
  3. Click the Active variant cell. Change the border to blue (#1a56db, 2px). Keep placeholder text visible. Optionally add a blinking cursor (a thin blue rect) inside the input
  4. Click the Filled variant cell. Change the placeholder text to actual text (e.g. "phil@example.com") — update the label's text property if needed. Keep the default grey border
  5. Click the Error variant cell. Change the border to red (#d94444). Change the input background to light red (#fef5f5). Add an error message text below the input — make it red, font size 10
  6. Add a boolean property called "Error message" if you want to toggle the error message visibility separately
  7. Set up the variant order in the Properties panel so they display logically: Empty, Active, Filled, Error
  8. Test each variant by creating instances and switching the State property

Pro tip

Error state: red border, light red background, red error message. Active state: blue border. Filled state: normal border with actual text. Empty: grey border with placeholder.