Add `data-is-checked` to checkbox and radio wrappers.

Describe the feature

Currently, I can’t add regular/static classes + conditional classes.

Simplified example:

    <FormKit  :wrapper-class="myVar && 'test-class'"  wrapper-class="flex items-centercursor-pointer" type="radio"
        :options="options">
    </FormKit>

I know I can probably do something like :class="true && 'flex items-centercursor-pointer'; myVar && 'test-class'" But this is kinda ugly.

I’m building a custom radio input, for which I want to add a border to the active/selected option

[justin-schroeder]

There probably should be a simpler way. We’ll change this issue to reflect that instead. As for what is happening here — FormKit inputs are written (under “the hood”) using FormKit’s Schema — which means you can extend the schema object on a per-section basis. This is a really neat feature that gives you lots of power over the internals of each component that you normally would not have.

The sections-schema prop lets you target a given section with a chunk of schema that will be applied “on top” of the pre-existing one. So in the given example data-is-checked is an attribute that is being added to the option section. It’s value is determined by the schema expression $fns.isChecked($option.value) which basically just checks if that checkbox is checked or not.

[silveltman]

Thanks! Both solutions work.

However, I find this part quiet robust for simply adding a checked state:

:sections-schema="{
      option: {
        attrs: {
          'data-is-checked': '$fns.isChecked($option.value)'
        }
      }
    }"

Isn’t there a simpler way? And if not, can you please elaborate on what’s happening here? I can’t make it up from the docs