Is there an element that is like a checkbox, but has three states?

For context, I am looking to make a side-project which helps to make DND character sheets.

In a character sheet, you have a list of skills. Next to each skill is a checkbox, allowing you to dictate proficiency in that skill.

However, some classes also have ‘Expertise’. What I need is a checkbox of sorts that can be marked with, for example, a ‘P’ or an ‘E’, or unchecked.

I did consider dropdown boxes, but in this context it wouldn’t be very user friendly.

Is this possible? It’s my first independent project and I’m doing this for the sake of learning to make web-pages. I really wasn’t sure what to even type into google to look for this.

why not group those ‘checkboxes’ for each of these characters?

good luck and happy learning :slight_smile:

1 Like

Sorry, I’m not sure I understand what you mean

I’m fairly new and struggle to learn unless I actually try something for myself. So sorry if this should be obvious

as in consider to have ‘multiple’ check boxes for ‘each chraracter’, would that solve this problem?

1 Like

Ah, I see. That is an option, yeah. Though I was hoping to keep it tidy, and lots of checkboxes everywhere could get messy.

For those who have not played DND, this is what the list of skills looks like:

The marked boxes on the left dictate that I am proficient in these skills, meaning I get a bonus.

On some sheets I have seen online, you can click this box a a second time and it will put an ‘E’ in it

You can then click it again to make it blank once more.

perhaps they are doing it through ‘scripting’!! but i dont really think there is any ‘checkbox’ alike elements with ‘three options’ have a look at list of available html elements from here!!

1 Like

Ah, that’s a useful list actually!

I was also considering just using some script for it. I suppose you can do pretty much anything that way if there’s no built-in option.

I would suggest using a drop-down when the character sheet is in “edit mode” and then displaying the “read only mode” differently. You could, for example have a small square that showed “E”, “P”, or empty depending on whether the character has proficiency or expertise. If you don’t want to mess with two different displays, then you could use a very small text box that only allows the characters “E”, “P”, or none to be entered. You could also make it a clickable area that changes its appearance with each click: click once for proficiency, again for expertise, again to go back to non-profiicent.

Basically… there are endless possibilities, but there is no built-in form control like what you are looking for.