How to change style of input tag based on checkbox?

Question

I have input form and input tag as a button. Before I was able to make a button which changed styling according to clicking on it but now i try to make this input gray until user check the checkbox. I tried to use <Show> and when property but i cant use when on <Show> tag. Then I tried to use onChange property and it seem to not give me any errors. I just don't understand how can I change styling inside class=" and then connect it to checkbox function? My checkbox is made by using createSignal

Any ideas?

   <input
      onChange={functionForStyling}
      name="submit"
      type={"submit"}
      value={"Sign up"}
      class=""
    />

Input takes a `disabled` props which is probably what you're looking for. — super, Feb 10 '23 at 14:14
Does this answer your question? [Conditional styling in SolidJS](https://stackoverflow.com/questions/72297265/conditional-styling-in-solidjs) — snnsnn, Feb 10 '23 at 15:15

score 0 · Answer 1 · answered Feb 12 '23 at 18:02

Assigning a class to a checkbox element is not different than assigning it to any html element.

Here is how you can assign a class to an html element conditionally.

import { createSignal, JSX } from 'solid-js';
import { render } from 'solid-js/web';

const App = () => {
  const [isChecked, setIsChecked] = createSignal(true);

  const toggle = () => setIsChecked(c => !c);

  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {
    setIsChecked(event.currentTarget.checked);
  };

  return (
    <div>
      <style>{`
      input.checked {
        transform: rotate(45deg);
      }
      
      input.unchecked {
        transform: rotate(45deg);  
      }
      `}</style>
      <input
        type='checkbox'
        class={isChecked() ? 'checked' : 'unchecked'}
        checked={isChecked()}
        onChange={handleChange}
      />
      {` `}
      <button onclick={toggle}>Toggle</button>
    </div>
  );
};

render(() => <App />, document.body);

https://playground.solidjs.com/anonymous/163ffec6-1293-4702-9ef6-0425461328c3

Please keep in mind that styling a checkbox is not that straightforward. You need to use pseudo selectors etc.

How to change style of input tag based on checkbox?

1 Answers1