DEV Community

Cover image for Styling the SelectControl from Formik with Chakra UI
Kristen Kinnear-Ohlmann
Kristen Kinnear-Ohlmann

Posted on • Originally published at kristenkinnearohlmann.dev

2 1

Styling the SelectControl from Formik with Chakra UI

I resolved an interesting issue while continuing the build on my registration form for the Breeze Lakes Point project using Next.js. I really struggled to find the proper way to style the Formik Chakra UI SelectControl component so that it matched the other controls. I wanted to have drop-down lists styled with the same grey background and white text that was the default for the form.

The default theme style for the SelectControl was to display the drop-down items with a white background that blended with my text color, which is set to white.
default style SelectControl formik-chakra-ui

<SelectControl
    name="pronoun"
    id="pronoun"
    label="Pronoun"
    marginLeft="10px"
>
    <option value="0">&nbsp;</option>
    <option value="1">she/her</option>
    <option value="2">he/him</option>
    <option value="3">they/them</option>
</SelectControl>
Enter fullscreen mode Exit fullscreen mode

I Googled for a solution but wasn't finding anything that helped me determine how to reset the background color of the drop-down items on the SelectControl.

I was able to style a conventional select control with classes defined in my global.css so that the display matched the other form controls.
conventional select control

<select className="bgtransparent form-element">
    <option className="bgtransparent-child" value="0">&nbsp;</option>
    <option className="bgtransparent-child" value="1">she/her</option>
    <option className="bgtransparent-child" value="2">he/him</option>
    <option className="bgtransparent-child" value="3">they/them</option>
</select>
Enter fullscreen mode Exit fullscreen mode

The issue with this solution was that I wasn't able to leverage the Formik and Yup conventions to populate the control with values, validate input values, or gather the selected values for use in form submission. I could certainly have written some additional functions to handle those actions but I wanted to be able to manage all form inputs in the same way. Using the SelectControl included with formik-chakra-ui was the way to accomplish those goals, but the configuration that worked for a conventional select control did not work for a formik-chakra-ui SelectControl.

I spent some time simply hovering over pieces of my code in VS Code to see what the intellisense might suggest for formatting the SelectControl. I tried a few options but was drawn back to the option to use HTML Attributes.
VS Code intellisense

I recalled in my searches and other code examples that the use of the double {{}} allowed execution for code like additional formatting. I added style={{ backgroundColor: "gray" }} to each option for the SelectControl to blend into the current page color.

<SelectControl
    name="pronoun"
    id="pronoun"
    label="Pronoun"
    marginLeft="10px"
>
    <option style={{ backgroundColor: "gray" }} value="0">
        &nbsp;
    </option>
    <option style={{ backgroundColor: "gray" }} value="1">
        she/her
    </option>
    <option style={{ backgroundColor: "gray" }} value="2">
        he/him
    </option>
    <option style={{ backgroundColor: "gray" }} value="3">
        they/them
    </option>
</SelectControl>
Enter fullscreen mode Exit fullscreen mode

This code allowed me to style the SelectControl to match my page style and capture the values for submission to the database.
working formik-chakra-ui SelectControl
submitted data

The next refactor of this code is to write a more flexible option for incorporating styles into the individual options.

I wasn't able to find any other sources that explained how to accomplish the solution. I hope this explanation will be helpful to other developers working with Next.js, Formik, and Chakra UI.

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay