Checkbox 复选框

'use client'

import { useState } from 'react'
import { Checkbox, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  const [remember, setRemember] = useState<boolean | 'indeterminate'>(false)

  return (
    <Stack gap="sm">
      <Checkbox checked={remember} onCheckedChange={setRemember}>
        记住登录状态
      </Checkbox>
      <Text size="sm" tone="muted">
        当前值：{String(remember)}
      </Text>
    </Stack>
  )
}

'use client'

import { useState } from 'react'
import { Checkbox } from '@hina-ui/react'

export default function Demo() {
  const [weekly, setWeekly] = useState<boolean | 'indeterminate'>(true)

  return (
    <Checkbox
      checked={weekly}
      onCheckedChange={setWeekly}
      description="每周一发送本周的更新汇总，可以随时退订。"
    >
      订阅周报
    </Checkbox>
  )
}

'use client'

import { useState } from 'react'
import { Checkbox } from '@hina-ui/react'

export default function Demo() {
  const [weekly, setWeekly] = useState<boolean | 'indeterminate'>(true)

  return (
    <Checkbox
      checked={weekly}
      onCheckedChange={setWeekly}
      controlPlacement="end"
      block
      description="每周一发送本周的更新汇总，可以随时退订。"
    >
      订阅周报
    </Checkbox>
  )
}

'use client'

import { useState } from 'react'
import { Checkbox, Stack } from '@hina-ui/react'

const types = ['Galgame', '轻小说', '漫画']

export default function Demo() {
  const [picked, setPicked] = useState(['Galgame'])

  const all: boolean | 'indeterminate' =
    picked.length === 0 ? false : picked.length === types.length ? true : 'indeterminate'

  function setAll(value: boolean | 'indeterminate') {
    setPicked(value === true ? [...types] : [])
  }

  function toggle(type: string, on: boolean | 'indeterminate') {
    setPicked(on === true ? [...picked, type] : picked.filter(t => t !== type))
  }

  return (
    <Stack gap="sm">
      <Checkbox checked={all} onCheckedChange={setAll}>
        全部类型
      </Checkbox>
      <Stack gap="sm" className="ps-6">
        {types.map(type => (
          <Checkbox
            key={type}
            checked={picked.includes(type)}
            onCheckedChange={value => toggle(type, value)}
          >
            {type}
          </Checkbox>
        ))}
      </Stack>
    </Stack>
  )
}

import { Checkbox, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack gap="sm">
      <Checkbox size="sm" checked>
        小号
      </Checkbox>
      <Checkbox size="md" checked>
        中号
      </Checkbox>
      <Checkbox size="lg" checked>
        大号
      </Checkbox>
    </Stack>
  )
}

import { Checkbox, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack gap="sm">
      <Checkbox invalid>我已阅读并同意用户协议</Checkbox>
      <Checkbox disabled>已禁用</Checkbox>
      <Checkbox disabled checked>
        已禁用且选中
      </Checkbox>
    </Stack>
  )
}

'use client'

import { useState } from 'react'
import { Checkbox, Inline } from '@hina-ui/react'

export default function Demo() {
  const [rows, setRows] = useState([true, false, false])

  return (
    <Inline gap="sm">
      {rows.map((row, index) => (
        <Checkbox
          key={index}
          checked={row}
          onCheckedChange={value =>
            setRows(rows.map((item, at) => (at === index ? value === true : item)))
          }
          aria-label={`选择第 ${index + 1} 行`}
        />
      ))}
    </Inline>
  )
}

'use client'

import { useState } from 'react'
import * as v from 'valibot'
import { Button, Checkbox, Form, FormField, Text } from '@hina-ui/react'

const schema = v.object({
  agreed: v.literal(true, '请先阅读并同意服务条款'),
})

export default function Demo() {
  const [values, setValues] = useState({ agreed: false as boolean | 'indeterminate' })
  const [saved, setSaved] = useState(false)

  async function save() {
    await new Promise(resolve => setTimeout(resolve, 600))
    setSaved(true)
  }

  return (
    <Form values={values} rules={schema} className="w-80" onSubmit={save}>
      {({ submitting }) => (
        <>
          <FormField name="agreed">
            <Checkbox
              checked={values.agreed}
              onCheckedChange={agreed => setValues({ ...values, agreed })}
            >
              我已阅读并同意服务条款
            </Checkbox>
          </FormField>
          <Button type="submit" loading={submitting} className="self-start">
            注册
          </Button>
          {saved && (
            <Text tone="muted" size="sm">
              已注册。
            </Text>
          )}
        </>
      )}
    </Form>
  )
}