tabler/shared/ui/form/Check.astro

---
import { capitalize } from '@shared/lib/string-format'

interface Props {
  type?: 'checkbox' | 'radio'
  checked?: boolean
  /** Switch mode (prop name isSwitch; `switch` is reserved). */
  switch?: boolean
  title?: string | false
  name?: string
  /** core/scss/ui/forms/_form-check.scss `.form-switch-{size}` — only 'lg' exists */
  size?: 'lg' | undefined
  titleOn?: string
  titleOff?: string
  class?: string
}

const { type = 'checkbox', checked = false, switch: isSwitch = false, title: titleProp = false, name, size, titleOn, titleOff, class: className } = Astro.props
const disabled = false

let title = titleProp
if (!title) {
  let t = ''
  if (disabled) t += ' disabled'
  if (checked) t += ' checked'
  if (isSwitch) t += ' switch'
  t += ' ' + type
  t += ' input'
  t = t.replace(/^\s+/, '')
  t = capitalize(t)
  title = t
}

const labelClasses = ['form-check', isSwitch && 'form-switch', isSwitch && size && `form-switch-${size}`, className]

const inputClasses = ['form-check-input']
---

<label class:list={labelClasses}>
  <input class:list={inputClasses} type={type} name={name || undefined} checked={checked} disabled={disabled} />
  {
    titleOn && titleOff ? (
      <Fragment>
        <span class="form-check-label form-check-label-on">{titleOn}</span>
        <span class="form-check-label form-check-label-off">{titleOff}</span>
      </Fragment>
    ) : (
      <span class="form-check-label">{title}</span>
    )
  }
</label>