Checkbox
Select All Bar
A select-all bar above the list: an indeterminate state, the selected count and one-click inversion.
- checkbox
- indeterminate
- toolbar
- selection
Preview
1440pxHost theme
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this in the header: https://vibeui.ru/c/checkbox-011?lang=en
1 из 5
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
# Install and place "checkbox-011" (Select All Bar) from VibeUI
## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/checkbox-011.json
Registry item: https://vibeui.ru/r/checkbox-011.json
Installs to: components/vibeui/checkbox-011.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.
Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.
## 2. What it is
A select-all bar above the list: an indeterminate state, the selected count and one-click inversion.
A list with a selection toolbar: "select all on this page" with an indeterminate state, inversion and a counter. The bar is visually separated from the rows, so it cannot be mistaken for one of them. Zero dependencies, one file.
## 3. How to use it
import { Checkbox011 } from "@/components/vibeui/checkbox-011"
<Checkbox011
title="Invoices"
items={items}
defaultValue={["March invoice"]}
onChange={setValue}
/>
Read the installed file for the full prop list.
## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.
Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)
## 5. Keep exactly as installed
- the local --vibeui-checkbox-011-* palette — do not swap it for your theme tokens
- setting indeterminate in an effect: it is a DOM property and cannot be written in markup
- the dash instead of a faded tick: a mixed state must differ in shape, not in shade
- the "on this page" wording — the bar selects nothing beyond the list it holds
- the bar separated by its own background: a select-all row must not look like a list item
- the counter with role="status": after a bulk action you need to hear how many are selected
## 6. You may change
- the items array and the initial defaultValue
- title — the accessible name of the block
- the onChange handler
- the accent through the accent prop
## 7. Rules
- Inverting without a count is risky: keep the counter next to the button.
- Tree data needs more — parent inheritance lives in checkbox-021.
- The component does not paginate: the selection covers the array you pass.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.
## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.For developers
npx shadcn@latest add https://vibeui.ru/r/checkbox-011.jsonhttps://vibeui.ru/r/checkbox-011.jsonКомпонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-checkbox-011-*. Клиентский: "use client". Заголовочный чекбокс получает indeterminate эффектом по ссылке на узел — атрибутом это свойство не задаётся. Промежуточное состояние нарисовано чертой через ::after, отмеченное — галочкой из двух граней. Панель отделена от списка фоном и рамкой, счётчик объявлен role="status".
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
"use client"
import { useEffect, useRef, useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Checkbox011Props = Omit<
ComponentPropsWithoutRef<"section">,
"children" | "onChange" | "title"
> & {
title?: string
items?: string[]
defaultValue?: string[]
onChange?: (value: string[]) => void
accent?: string
}
// Идея компонента: «выбрать всё» вынесено в отдельную панель над списком —
// с промежуточным состоянием, числом выбранного и инверсией выбора. В отличие
// от родительской строки внутри списка, панель не притворяется таким же
// пунктом, как элементы под ней, и её нельзя выбрать по ошибке.
const STYLES = `
:where([data-vibeui-block="checkbox-011"]){
--vibeui-checkbox-011-bg:oklch(1 0 0);
--vibeui-checkbox-011-fg:oklch(0.22 0.014 265);
--vibeui-checkbox-011-muted:oklch(0.55 0.014 265);
--vibeui-checkbox-011-border:oklch(0.9 0.006 265);
--vibeui-checkbox-011-bar:oklch(0.97 0.004 265);
--vibeui-checkbox-011-hover:oklch(0.98 0.003 265);
--vibeui-checkbox-011-accent:oklch(0.55 0.17 285);
--vibeui-checkbox-011-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="checkbox-011"]{
display:block;width:100%;max-width:23rem;box-sizing:border-box;overflow:hidden;
border:1px solid var(--vibeui-checkbox-011-border);border-radius:0.875rem;
background:var(--vibeui-checkbox-011-bg);
font-family:var(--vibeui-checkbox-011-font);color:var(--vibeui-checkbox-011-fg);
}
[data-vibeui-block="checkbox-011"] [data-part="bar"]{
display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;
padding:0.5rem 0.75rem;
background:var(--vibeui-checkbox-011-bar);
border-bottom:1px solid var(--vibeui-checkbox-011-border);
}
[data-vibeui-block="checkbox-011"] [data-part="all"]{
display:flex;align-items:center;gap:0.5rem;
font-size:0.8125rem;font-weight:650;cursor:pointer;
}
[data-vibeui-block="checkbox-011"] [data-part="count"]{
margin-left:auto;font-size:0.75rem;color:var(--vibeui-checkbox-011-muted);
font-variant-numeric:tabular-nums;
}
[data-vibeui-block="checkbox-011"] button{
appearance:none;border:0;background:transparent;padding:0;cursor:pointer;
font:inherit;font-size:0.75rem;font-weight:650;color:var(--vibeui-checkbox-011-accent);
}
[data-vibeui-block="checkbox-011"] button:focus-visible{outline:2px solid var(--vibeui-checkbox-011-accent);outline-offset:2px;border-radius:0.25rem}
[data-vibeui-block="checkbox-011"] ul{margin:0;padding:0.25rem 0;list-style:none}
[data-vibeui-block="checkbox-011"] li label{
display:flex;align-items:center;gap:0.625rem;
padding:0.4375rem 0.75rem;font-size:0.875rem;cursor:pointer;
transition:background-color .15s ease;
}
[data-vibeui-block="checkbox-011"] li label:hover{background:var(--vibeui-checkbox-011-hover)}
[data-vibeui-block="checkbox-011"] input{
appearance:none;position:relative;flex:none;cursor:pointer;
width:1.0625rem;height:1.0625rem;margin:0;box-sizing:border-box;
border:1.5px solid var(--vibeui-checkbox-011-border);border-radius:0.3125rem;
background:var(--vibeui-checkbox-011-bg);
transition:background-color .15s ease,border-color .15s ease;
}
[data-vibeui-block="checkbox-011"] input:checked,
[data-vibeui-block="checkbox-011"] input:indeterminate{
border-color:transparent;background:var(--vibeui-checkbox-011-accent);
}
[data-vibeui-block="checkbox-011"] input:checked::after{
content:"";position:absolute;left:50%;top:50%;
width:0.25rem;height:0.4375rem;margin:-0.3125rem 0 0 -0.125rem;
border-right:2px solid oklch(0.99 0.01 285);border-bottom:2px solid oklch(0.99 0.01 285);
transform:rotate(45deg);
}
/* Промежуточное состояние — черта, а не бледная галка: форма читается без
цвета, и скринридер объявляет «mixed» сам. */
[data-vibeui-block="checkbox-011"] input:indeterminate::after{
content:"";position:absolute;left:50%;top:50%;
width:0.5rem;height:2px;margin:-1px 0 0 -0.25rem;border-radius:1px;
background:oklch(0.99 0.01 285);
}
[data-vibeui-block="checkbox-011"] input:focus-visible{outline:2px solid var(--vibeui-checkbox-011-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="checkbox-011"] *{animation:none!important;transition:none!important}}
`
const DEFAULT_ITEMS = [
"Счёт за март",
"Счёт за апрель",
"Счёт за май",
"Счёт за июнь",
"Счёт за июль",
]
/**
* Панель «выбрать всё» с промежуточным состоянием и инверсией выбора.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Checkbox011({
title = "Документы",
items = DEFAULT_ITEMS,
defaultValue = ["Счёт за март"],
onChange,
accent,
className,
style,
...props
}: Checkbox011Props) {
const [value, setValue] = useState<string[]>(defaultValue)
const allRef = useRef<HTMLInputElement>(null)
const palette = {
...(accent ? { "--vibeui-checkbox-011-accent": accent } : null),
...style,
} as CSSProperties
const all = value.length === items.length && items.length > 0
const some = value.length > 0 && !all
// indeterminate — свойство DOM, атрибутом его не задать.
useEffect(() => {
if (allRef.current) {
allRef.current.indeterminate = some
}
}, [some])
const update = (next: string[]) => {
setValue(next)
onChange?.(next)
}
return (
<>
<style href="vibeui-checkbox-011" precedence="medium">
{STYLES}
</style>
<section
{...props}
data-vibeui-block="checkbox-011"
className={className}
style={palette}
aria-label={title}
>
<div data-part="bar">
<label data-part="all">
<input
ref={allRef}
type="checkbox"
checked={all}
onChange={() => update(all ? [] : [...items])}
/>
Выбрать все на странице
</label>
<button
type="button"
onClick={() =>
update(items.filter((item) => !value.includes(item)))
}
>
Инвертировать
</button>
<span data-part="count" role="status">
{value.length} из {items.length}
</span>
</div>
<ul>
{items.map((item) => (
<li key={item}>
<label>
<input
type="checkbox"
checked={value.includes(item)}
onChange={() =>
update(
value.includes(item)
? value.filter((entry) => entry !== item)
: [...value, item],
)
}
/>
<span>{item}</span>
</label>
</li>
))}
</ul>
</section>
</>
)
}