CheckboxGroup

import { CheckboxGroup } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  const options = [{"label":"Apples","value":"apples"},{"label":"Bananas","value":"bananas"},{"label":"Cherries","value":"cherries"},{"label":"Dates","value":"dates"}]

  return () => (
    <>
      <CheckboxGroup label="Fruit" hideLabel defaultValue={['apples']} options={options} />
    </>
  )
}

import { CheckboxGroup } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  const options = ['Apple', 'Banana', 'Cherry', 'Mango'].map((label) => ({ value: label.toLowerCase(), label }))

  return () => (
    <>
      <CheckboxGroup label="Notifications" options={[
        { value: 'email', label: 'Email', description: 'Updates in your inbox' },
        { value: 'push', label: 'Push', description: 'Notifications on your device' },
      ]} />
    </>
  )
}

import { CheckboxGroup } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  const options = ['Apple', 'Banana', 'Cherry', 'Mango'].map((label) => ({ value: label.toLowerCase(), label }))
  
  let selected: string[] = []
  
  const setSelected = (values: string[]) => { selected = values; handle.update() }

  return () => (
    <>
      <CheckboxGroup label="Features" options={options}
        value={selected} onValueChange={setSelected} />
    </>
  )
}