Checkbox

Описание

Используются, когда пользователю необходимо выбрать одну или несколько опций из списка.

Подробнее об использовании элемента читайте на официальном сайте

Примеры

Купить молоко

Покорить мир

Компонент

Компонент можно сохранить в src/shared/ui/Checkbox.tsx. Обратите внимание на необходимые зависимости: Label и UIStateLayer. В качестве иконки я использую iconoir-react.

Так же данный компонент использует @radix-ui/react-checkbox компонент.

yarn add @radix-ui/react-checkbox

"use client"

import React from "react"

import * as RadixCheckbox from "@radix-ui/react-checkbox"
import { Check } from "iconoir-react"

import Label from "@/shared/typography/Label"

import UIStateLayer from "@/shared/ui/UIStateLayer"

import { cn } from "@/lib/cn"

export const CheckboxLabel: React.FC<
  React.LabelHTMLAttributes<HTMLLabelElement>
> = ({ className, children, ...props }) => (
  <label {...props}>
    <Label size={"large"} className={cn(className)}>
      {children}
    </Label>
  </label>
)

export const Checkbox = React.forwardRef<
  React.ElementRef<typeof RadixCheckbox.Root>,
  React.ComponentPropsWithoutRef<typeof RadixCheckbox.Root>
>(({ className, ...props }, forwardedRef) => {
  return (
    <RadixCheckbox.Root
      {...props}
      ref={forwardedRef}
      className={cn(
        "relative group w-[18px] h-[18px] border-2 border-onSurface rounded-sm data-[state=checked]:bg-primary data-[state=checked]:border-0 transition-colors duration-short4 ease-standard",
        className
      )}
    >
      <UIStateLayer className="flex items-center justify-center h-10 w-10 rounded-full absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 group-data-[state=checked]:bg-primary bg-onSurface group-data-[state=checked]:bg-opacity-0 group-data-[state=checked]:group-hover:bg-opacity-[0.08] group-data-[state=checked]:group-active:bg-opacity-[0.12] transition-colors duration-short4 ease-standard">
        <RadixCheckbox.Indicator className="data-[state=checked]:text-onPrimary animate-fade-in">
          <Check width={18} height={18} />
        </RadixCheckbox.Indicator>
      </UIStateLayer>
    </RadixCheckbox.Root>
  )
})
Checkbox.displayName = "Checkbox"

Использование

Данный файл экспортирует два компонента: CheckboxLabel и Checkbox. Первый является текстом для чекбокса, второй же - сам чекбокс.

Ниже - код для примера в начале страницы.

<div className="flex items-center gap-4">
  <Checkbox defaultChecked id="milk" />
  <CheckboxLabel htmlFor="milk">Купить молоко</CheckboxLabel>
</div>
<div className="flex items-center gap-4">
  <Checkbox id="world" />
  <CheckboxLabel htmlFor="world">Покорить мир</CheckboxLabel>
</div>