Foundation-sites: Feature request: checkbox, radio button, radio button group

[attilah]

Feature:

Make Foundation Sites' UI components more complete by providing SVG based themeable checkbox and radio button components.

From behavioral perspective they're really similar visually and from DOM perspective they're sharing the same characteristics.

Microsoft Office UI fabric covers all the state and visual requirements for such a component, it can be a great guideline to make it happen in Foundation too, although Fabric is using a font for the checkmark instead of an inline SVG.

Since standalone radio buttons does not make too much sense from component perspective we need to have a radio button group component which wraps a group of radio button components.

For reference:
https://dev.office.com/fabric#/components/checkbox
https://dev.office.com/fabric#/components/choicegroup

[ncoden]

Hi @attilah,

I agree this can be useful to provide a way to customize checkbox and radio buttons, with SVG or pure CSS.
@zurb/yetinauts What do you think ?

[brettsmason]

This sounds like a good idea to me 👍
Also in case this helps the discussion: https://designnotes.blog.gov.uk/2016/11/30/weve-updated-the-radios-and-checkboxes-on-gov-uk/ @andycochran shared this a few weeks ago which ties in with this I think.

[ncoden]

@attilah Do you already an idea in the way this new feature could be used ?

I think it would be a Sass mixin used to declare a new checkbox/radio button component, with SVG arguments.

[kball]

Seems like a good idea to me.

Slightly off topic, but I'm also interested in other ways we can/should be thinking about SVGs within Foundation. I've been playing with a simple plugin for auto-inlining SVGs using data attributes, which then makes them accessible to CSS in page, among many other things (see https://github.com/zurb/foundation-inline-svg)... I think there's a ton of common cases like this where having at least some mixins that "grok" svg would make sense.

[attilah]

@ncoden In my head it is about pure html + css where these fields can be included as part of Foundation Forms in different layout modes (horizontal, vertical, etc)

I am not entirely sure that we should push it being js components, since that can vary based on what environment you try to use it.

[andycochran]

As @brettsmason points out. I'd really like us to follow the gov.uk method. It's very well researched and tested.

[kball]

@ncoden are you still thinking to implement this?

[JeremyEnglert]

Lets consider this and discuss it for Foundation 7. As part of our clean-up initiative, I'm closing this issue.