PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

“Yes or No?” | CSS-Tricks

December 23, 2020
in Web Dev
280 12
“Yes or No?” | CSS-Tricks


Sara Soueidan digs into this HTML/UX situation. “Yes” or “no” is a boolean situation. A checkbox represents this: it’s either on or off (uh, mostly). But is a checkbox always the best UX? It depends, of course:

Use radio buttons if you expect the answer to be equally distributed. If I expect the answer to be heavily biased to one answer I prefer the checkbox. That way the user either makes an explicit statement or just acknowledges the expected answer.

If you want a concrete, deliberate, explicit answer and don’t want a default selection, use radio buttons. A checkbox has an implicit default state. And the user might be biased to the default option. So having the requirement for an explicit “No” is the determinig factor.

So you’ve got the checkbox approach:

<label>
  <input type="checkbox">
  Yes?
</label>

Which is nice and compact but you can’t make it “required” (easily) because it’s always in a valid state.

So if you need to force a choice, radio buttons (with no default) are easier:

<label>
  <input type="radio" name="choice-radio">
  Yes
</label>
<label>
  <input type="radio" name="choice-radio">
  No
</label>

I mean, we might as well consider another a range input too, which can function as a toggle if you max it out at 1:

<label class="screen-reader-only" for="choice">Yes or No?</label>
<span aria-hidden="true">No</span>
<input type="range" max="1" id="choice" name="choice">
<span aria-hidden="true">Yes</span>

Lolz.

And I suppose a <select> could force a user choice too, right?

<label>
  Yes or no?
  <select>
    <option value="">---</option>
    <option value="">Yes</option>
    <option value="">No</option>
  </select>
</label>

I weirdly don’t hate that only because selects are so compact and styleable.

If you really wanna stop and make someone think, though, make them type it, right?

<label>
  Type "yes" or "no"
  <input type="text" pattern="[Yy]es|[Nn]o">
</label>

Ha.





Source link

Share219Tweet137Share55Pin49

Related Posts

Web Dev

Fresh Inspiration For March And A Smashing Winner (2021 Wallpapers Edition) — Smashing Magazine

Our wallpapers post this month is a special one: There’s not only a new collection of wallpapers created by...

February 28, 2021
Weekly Platform News: Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw
Web Dev

Weekly Platform News: Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw

In this week’s roundup, we highlight a proposal for a new <popup> element, check the use of prefers-reduced-motion on...

February 26, 2021
The Things I Add to Tailwind CSS Right Out of the Box
Web Dev

The Things I Add to Tailwind CSS Right Out of the Box

In every project where I use Tailwind CSS, I end up adding something to it. Some of these things...

February 26, 2021
Laravel Sail adds support for choosing which services you’d like installed
Web Dev

Laravel Sail adds support for choosing which services you’d like installed

Laravel Sail, a lightweight CLI for interacting with Laravel's default docker environment, recently launched a new update that allows...

February 26, 2021
Next Post
Going Beyond The Basics — Smashing Magazine

Going Beyond The Basics — Smashing Magazine

Continuous Performance Analysis with Lighthouse CI and GitHub Actions

Continuous Performance Analysis with Lighthouse CI and GitHub Actions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Reducing Docker image build time on AWS CodeBuild using an external cache : idk.dev

Reducing Docker image build time on AWS CodeBuild using an external cache : idk.dev

September 4, 2020
Open Food Facts API – Laravel News

Open Food Facts API – Laravel News

May 23, 2020
How to Uninstall Applications from Ubuntu [Beginner’s Guide]

How to Uninstall Applications from Ubuntu [Beginner’s Guide]

January 20, 2021
A Free & Open Source Video Conferencing Solution

A Free & Open Source Video Conferencing Solution

June 22, 2020

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In