Checkbox

package checkbox

import "github.com/alternayte/gx/registry/icons"

props {
  // Name is the name attribute of the input. The form sends the value under this name.
  Name     string = ""
  // Value is the value the form sends when the checkbox is checked.
  Value    string = "on"
  // Checked renders the checkbox checked.
  Checked  bool = false
  // Disabled stops the user from changing the checkbox and dims it.
  Disabled bool = false
  // Invalid sets aria-invalid on the input and shows the error style.
  Invalid  bool = false
  // Class adds classes to the root element, the label.
  Class    string = ""
  // Children is the checkbox label. A nil value renders the box alone.
  Children gx.Node = nil
  // Attrs adds HTML attributes to the root element, the label.
  Attrs    gx.Attrs = nil
}

<label class={gx.Cx("flex items-center gap-2 text-sm leading-none font-medium select-none", p.Class)} {...p.Attrs}>
  <input type="checkbox" name={p.Name} value={p.Value} checked={p.Checked} disabled={p.Disabled} aria-invalid={p.invalid()} class="peer sr-only" />
  <span aria-hidden="true" class="grid size-4 shrink-0 place-content-center rounded-[4px] border border-input text-transparent shadow-xs transition-shadow outline-none peer-focus-visible:border-ring peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-aria-invalid:border-destructive peer-aria-invalid:ring-destructive/20 peer-checked:border-primary peer-checked:bg-primary peer-checked:peer-focus-visible:border-primary peer-checked:text-primary-foreground dark:bg-input/30 dark:peer-aria-invalid:ring-destructive/40 dark:peer-checked:bg-primary motion-reduce:transition-none">
    <icons.Check class="size-3.5" />
  </span>
  if p.Children != nil {
    <span class="peer-disabled:cursor-not-allowed peer-disabled:opacity-50">{p.Children}</span>
  }
</label>

package checkbox

import "github.com/alternayte/gx"

var CheckboxFixtures = gx.Fixtures[CheckboxProps]{
	"Unchecked":       {Name: "terms", Children: gx.Text("Accept the terms")},
	"Checked":         {Name: "terms", Checked: true, Children: gx.Text("Accept the terms")},
	"Disabled":        {Name: "terms", Disabled: true, Children: gx.Text("Disabled")},
	"DisabledChecked": {Name: "terms", Checked: true, Disabled: true, Children: gx.Text("Disabled")},
	"Invalid":         {Name: "terms", Invalid: true, Children: gx.Text("Accept the terms")},
}

package checkbox

// invalid returns the aria-invalid value of the input.
func (p CheckboxProps) invalid() string {
	if p.Invalid {
		return "true"
	}
	return "false"
}