Tags: checkbox

12

sparkline

Monday, July 23rd, 2018

On Designing and Building Toggle Switches

Sara shows a few different approaches to building accessible toggle switches:

Always, always start thinking about the markup and accessibility when building components, regardless of how small or simple they seem.

Wednesday, March 28th, 2018

Nobody Said CSS Is Easy

One thing I gained a stronger awareness of (simply from working with checkboxes) is that it’s important to progressively enhance UI components, so that a fancy custom one is able to fall back to the default browser styles and functionality. This way, a user can still access the UI if JavaScript or CSS fail.

Tuesday, May 30th, 2017

Under-Engineered Custom Radio Buttons and Checkboxen | Adrian Roselli

Stylish and accessible checkboxes and radio buttons accompanied by an explanation of the CSS involved.

No images were harmed in the making of these form controls.

Wednesday, March 22nd, 2017

WTF, forms?

Here’s a CSS file that will give you a bit more control over styling some form elements. The thinking behind the CSS for each element is explained nice and clearly.

Monday, December 5th, 2016

We’ve updated the radios and checkboxes on GOV.UK | GDS design notes

I always loved the way that Gov.uk styled their radio buttns and checkboxes with nice big visible labels, but it turns out that users never used the label area. And because it’s still so frickin’ hard to style native form elements, custom controls with generated content is the only way to go if you want nice big hit areas.

Thursday, January 7th, 2016

Simply Jonathan: Multiple values for checkboxes

Following on from the post by Aaron that I linked to, more details about sending (and receiving) values from multiple checkboxes with the same name.

Wednesday, January 6th, 2016

Affirming User Choice With Checkboxes, From the Notebook of Aaron Gustafson

Well, this is timely! Just today I was having a really good natter with Charlotte about using checkboxes, specifically sending multiple values to the server:

You’ll notice that the name given to each of these checkbox input elements is the same: “reservation-requested-device[]”. The square brackets (“[]”) at the end of the name are the magic bit that allows the values of each chosen “reservation-requested-device” checkbox to be submitted as the value of “reservation-requested-device”.

See, I wasn’t sure whether that was just a PHP thing (the only server-side input-handling I’ve had much experience of) or whether it was a more general way of sending multiple values.

Update: It seems that the square brackets are indeed a PHP thing. Multiple values will be sent in any case. See this test case.

Sunday, September 6th, 2015

GOV.UK elements

I really like the clear styling of checkboxes and radio buttons in the GDS pattern library. Fitts’s law in action.

Friday, April 24th, 2015

100 words 033

Charlotte came up with a nifty trick that combines two different techniques she’s been working with.

The first building block is the pattern of using checkboxes, labels, and the :checked pseudo-class to create progressive disclosure toggles without JavaScript. There’s just one caveat with that technique though—the item being toggled must appear after the trigger label in the source order of the markup.

Enter the second building block: flexbox. With flexbox, we’re no longer at the mercy of the source order in our markup. By using flex-direction: column-reverse, the progressive disclosure trigger can be displayed after the item being toggled.

Tuesday, July 1st, 2014

A no-javascript toggle content feature

A clever way of doing progressive disclosure with CSS.

Tuesday, May 22nd, 2007

Eric's Archived Thoughts: Formal Weirdness

Eric explores the dark cabbalistic world of attempting to style form controls. This explains why he doesn't use the universal selector for resetting default styles.

Wednesday, April 6th, 2005

Custom checkboxes

A truly excellent piece of DOM scripting by Steve Chipman that replaces checkboxes with images.