Getting Started
Solid dot
iconType="circle-dot" — the default mark.
import { useState } from "react"
import { Checkbox, Flex } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
export function CheckboxSolidPreview() {
const [a, setA] = useState(true)
const [b, setB] = useState(false)
return (
<PreviewLayout>
<Flex vertical gap={10}>
<Checkbox iconType="circle-dot" checked={a} onChange={(v) => setA(v)}>
Accept terms and conditions
</Checkbox>
<Checkbox iconType="circle-dot" checked={b} onChange={(v) => setB(v)}>
Subscribe to newsletter
</Checkbox>
</Flex>
</PreviewLayout>
)
}
Outline ring
iconType="circle-outline-dot" — subtler variant for nested lists.
import { useState } from "react"
import { Checkbox, Flex } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
export function CheckboxOutlinePreview() {
const [a, setA] = useState(true)
const [b, setB] = useState(false)
return (
<PreviewLayout>
<Flex vertical gap={10}>
<Checkbox
iconType="circle-outline-dot"
checked={a}
onChange={(v) => setA(v)}
>
Enable analytics
</Checkbox>
<Checkbox
iconType="circle-outline-dot"
checked={b}
onChange={(v) => setB(v)}
>
Personalised recommendations
</Checkbox>
</Flex>
</PreviewLayout>
)
}
Disabled
disabled is forwarded to Arco.
import { Checkbox, Flex } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
export function CheckboxDisabledPreview() {
return (
<PreviewLayout>
<Flex vertical gap={10}>
<Checkbox iconType="circle-dot" disabled checked>
Disabled & checked
</Checkbox>
<Checkbox iconType="circle-dot" disabled>
Disabled & unchecked
</Checkbox>
</Flex>
</PreviewLayout>
)
}
Installation
pnpm add @appboxo/ui-kitBuild mini-apps with Boxo
Freedom UI Kit is the design system behind partner mini-apps shipping on the Boxo platform.
Learn more about Boxo