Indeterminate Switch

Anvil Q&A
1

I was wondering how we could go about introducing an indeterminate property to the new anvil-m3-switch. I see back in the day there was a similar discussion about Indeterminate checkboxes

Has anyone done something similar with either the anvil-extras switch or the new m3 switch?

2

M3 doesn’t have specs for an indeterminate switch. To be honest, I’m not sure what that would look like or what the purpose of it would be. My gut instinct is that it would be bad UX. The purpose of a switch is to turn something on or off. @Neeeco what is your use case?

3

It comes down to a client request. They don’t like the look of a checkbox (which has indeterminate state), they prefer a switch.

However, in their use case we don’t want the value to be preset to either True or False. The user must explicitly select True/False in order to go to the next step in the flow.

I have created a custom component here and it works great… if I only have one such switch… My JS knowledge is limited, but I know the problem is because I’m declaring something twice… Would love it if someone can help me get this to work so that I can add two or more of these switches to a form.

4

Hi @Neeeco,

I can’t really argue with a client request, but I still maintain that this use case violates the purpose of a switch! So I can’t say we have any plans to implement one in M3.

However, in terms of your implementation of the switch. The simplest answer is that in HTML, id should be unique. You are setting the id of your HTML element to be “switch” and using document.getElementById() in JS. This blows up when you have multiple switches on the screen because it is looking for a single element with that id. You could set a unique id for each switch, but my suggestion would be to implement your component differently.

Your component’s HTML has <html>, <head> and <meta> and <title> tags, which you don’t need here. I would also put the css in your theme.css file instead of using a <style> script. And instead of using JS to implement the logic for your component, I would use Python. This will eliminate the need for getElementById. I’m not sure if you’ve seen the docs on custom components from HTML, but it might be helpful: Anvil Docs | Components from HTML. You can also look at the code for the Material 3 theme for examples: GitHub - anvil-works/material-3-theme: Anvil's Material 3 Theme.

5

Just as Anvil’s default value for a boolean column is neither True, nor False, but None: literally a lack of data.

6

Correct, but need to show it visually. Agree this may not be standard for a switch, but “client is always right” … unless they’re not :wink:

7

Explicit is better than implicit. :wink:

8

Just to be clear, I do understand the use case. From a UI/UX perspective, I just don’t think a switch is appropriate since switches are meant to only have two states. However, as @Neeeco has said, the client is always right! And in my case, you are the client! :wink:

9

This feels like you should use radio buttons that are grouped…

1 Like
10

I think you could quite easily add this to the anvil-extras switch since under the hood it’s an anvil checkbox.

You won’t be able to do this in the designer. But in code you can do:

self.switch_1.allow_indeterminate = True
self.switch_1.checked = None

You’d then need to add the indeterminate styles to your theme.css

You can paste the css from this file in anvil-extras anvil-extras/client_code/Switch/__init__.py at main · anvilistas/anvil-extras · GitHub

To an LLM and you’ll probably get something useful.

Here’s what Claude suggested



/* Indeterminate state styles */
.ae-switch label input[type=checkbox]:indeterminate+.ae-switch-lever {
    background-color: rgba(var(--color) / .3);
}

.ae-switch label input[type=checkbox]:indeterminate+.ae-switch-lever:after,
.ae-switch label input[type=checkbox]:indeterminate+.ae-switch-lever:before {
    left: 8px; /* Center position - halfway between 0 and 18px */
}

.ae-switch label input[type=checkbox]:indeterminate+.ae-switch-lever:after {
    background-color: rgba(var(--color) / .7);
}

/* Indeterminate active state */
input[type=checkbox]:indeterminate:not(:disabled) ~ .ae-switch-lever:active::before {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    background-color: rgb(var(--color) / 0.15);
}

/* Indeterminate disabled state */
.ae-switch label input[type=checkbox][disabled]:indeterminate+.ae-switch-lever:after {
    background-color: #949494;
}

/* Modern CSS color syntax support for indeterminate */
@supports (color: rgb(from white r g b / 0.2)) {
    .ae-switch label input[type=checkbox]:indeterminate+.ae-switch-lever {
        background-color: rgba(from var(--color) r g b / .3);
    }
    .ae-switch label input[type=checkbox]:indeterminate+.ae-switch-lever:after {
        background-color: rgba(from var(--color) r g b / .7);
    }
}

Small example works for me
(and PRs welcome)

2 Likes
11

Read the docs for the first time and SO MUCH easier to do all the logic python side! Thanks @brooke . I have updated the clone link to include the pythonised way of doing it if anyone else want to use it or take it further. Indeterminate Switch - #3 by Neeeco

For my use case, the current state will do.

@stucork thanks for the anvil-extras pointer, might try that one as well.

4 Likes