Customize My First Checkbox Icon with elm-ui

Flavio Corpa
InstructorFlavio Corpa
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

This is the only lesson in which we will fallback to CSS to give our dropdown's scrollbar a fancier look because this is very browser dependent and there is no way (yet) to do this with elm-ui.

Instructor: [0:00] For our final touch to our custom dropdown, we're going to make a last change, which is to make our own input checkbox icon. If you remembered, when we used input.default checkbox, we used the one that came by default with Elm-UI. That doesn't mean that we cannot change.

[0:16] In order to do it, we need to do a small trick. We need to go to the Elm-UI source code. We're going to go to the source element input, and scroll to the end. There we have the default checkbox code.

[0:28] We're going to copy it and then create a new module here. We're going to call checkbox.elm and say module Checkbox exposing (everything). We're going to paste the code.

[0:40] We need to add a couple imports -- import Element exposing (color), Element html Attribute (RGB555), our favorite. Now, import Element.Background and call it Background. Import Element.Border as Border, import Element.Font as Font, and finally import html attribute, exposing class.

[1:05] If we come back here, we do not have access to this internal class. What we're going to do is do call the html attribute class and give it the name focusable. Now it's complaining because we don't have the color white, and that is correct.

[1:19] We're going to go back to our code and we're going to copy these two colors that we have here, white and a light gray. We're going to cut them from this file, paste them here, and now the code is no longer complaining.

[1:30] If we analyze this code, it's quite terse, and it is not important. The way we created our own checkbox, we're going to call customOurOwnCheckbox. In the case where it says that it's checked, instead of having this, by default, blue color, we're going to say that uncheck, display the color light gray.

[1:49] Now when we go back to our code, we can say import checkbox exposing white and light gray, and, where we were previously using our input.default checkbox, now we can say checkbox.Custom. You see?

[2:03] This is how easy it is to customize our own icon checkbox with Elm-UI.

~ 31 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today