Importing alternative checkboxes

Ignition
1

I've been wondering this for a while, but is there any way that I can use any of these checkboxes from this link? I've tried adding some into my adv stylesheet, but no luck when applying to a component.. not sure what component I would even apply them to, or if i'd need to use the markdown component to insert the divs myself..

One for @victordcq?

Edit: or these radio buttons?

2 Likes
2

It looks each of the checkboxes supplies slightly different HTML; some are just checkboxes inside divs, but others have separate labels/other stuff going on (the sliders, for example).

Personally I'd focus on styling the built in checkbox component. Somebody is going to hate you when they find you've used injection just to style the checkboxes :laughing:.

You'll have to do some work to "reset" the base IA style and use probably use some pseudo elements, but all of these styles are achievable with the built-in component.

Got a specific one in mind?

Edit: The toggle component also exists, that might be a better starting point depending on the target style.

3 Likes
3

Haha, I would try not to use this on a project for work, more for home/learning experience.

One thing I'd like to be able to do though, is a nice toggle button between two text values.

Something like #10 here:

image
image

4

Basic proof of concept, up to you to make it pretty :wink:

20241009_211457

.ia_toggleSwitch__track,
.ia_toggleSwitch__thumb {
	display: none;
}

.ia_toggleSwitch {
	flex-direction: row;
	width: 100%;
	display: inline-block;
	overflow: visible;
}


.ia_toggleSwitch::after {
	position: absolute;
	width: 50%;	
	top: 0px;
	bottom: 0px;
	border-radius: 8px;
	

	content: "No";
	left: 0px;
	background-color: red;
}


.ia_toggleSwitch:has(.ia_toggleSwitch__thumb--selected)::after  {
	left: auto;
	right: 0px;

	content: "Yes";
	background-color: green;
}
4 Likes
5

While not typical in the industrial setting, I like the extra polish these toggles/checkboxes give. Definitely a more modern look, and makes the interaction more "interactive?". Makes it feel more like an application, and between the text indication and color change, definitely lets the user know that the value changed.

1 Like
6

Nah I think it looks shmick as it is! I've rolled it out across the board to all our projects :slight_smile:
:joy:

On a serious note though, I didn't think about modifying the IA toggle itself, but that might be another option. I was hoping I could add multiple additional styles, but maybe it's better to set a standard style anyway. Cheers, i'll look into it!

1 Like
7

To be fair I’ve seen worse in running systems :laughing:

You can still do this, just add an additional .psc-? class in front of the selectors in my example.

1 Like
8

If you want an extreme example, check out my pyro-mui-joy project. It almost entirely operates by using empty Perspective style classes as selectors for external CSS in order to style the default IA components.

1 Like
9

Most of these seem possible to do with just some basic components... You will need some different css though. Mainly you will have to bascily rename all css class selectors with psc- infront

I guess you could techincally create custom html too. You could put the creating of this in the injectables, than use markdwon to utilse them would be quite compact in the views itself...

Though this is not a trivial thing to do. especcially to get some feedback back into perspective... Probably easier to just make a custom component where all that is already done :stuck_out_tongue:

1 Like