Fancy Fields

Emmy Armintrout
Whistle Product & Engineering
2 min readMar 2, 2016

Do you use React? Are you building a form? Are you fancy?

If so, then you are really good at Googling, because this article is for you.

Fancy Field has a smooth float label and multiple message customization options. It relies on CSS animation whenever possible and has few prop requirements. It will impress your parents.

Fancy Field is the product of months of Development and Testing. It has been upgraded to handle multiple parameter types. For example, when you’re filling out a form about your dog, you probably expect a real-time recommendation for how much daily exercise your dog should get. Right!? Just pass Fancy Field a focusText prop and boom. FANCY.

If you’re a person of questionable character and have a Not Dog, you shouldn’t select a dog breed. Disable that right away!*

Being Fancy means being frank. Let the people know why they’re wrong. Position that error message where you WANT. It’s your party.

Fancy Field does not stand alone. There’s also Fancy Button, which can actually become Fancy Checkbox, Fancy Toggle, or Fancy Switch with the addition of one prop. Fancy Button inspires the forms of your dreams.

A poll about business.

All the stuff you need, plus More Fancy Options, is available at the Fancy Fields GitHub. Easily tweak styles in fancy-variables.scss. We all know you want to pick your own $fancy-color and $error-color.

Fields would have never been this Fancy without the help of designer Arman Nobari, my coding guru Brian, and the general wonderfulness of whistlelabs.

*Not actually that fancy, I just wanted to draw a frowny face.

--

--