import { CheckboxCard as ChakraCheckboxCard } from "@chakra-ui/react" import * as React from "react" export interface CheckboxCardProps extends ChakraCheckboxCard.RootProps { icon?: React.ReactElement label?: React.ReactNode description?: React.ReactNode addon?: React.ReactNode indicator?: React...
import { CCheckbox, CCheckboxGroup } from "chakra-ui/vue" Copy Usage# Basic usage Checkbox Copy Editable Example <c-checkbox default-is-checked>Checkbox</c-checkbox> Disabled Checkbox# Checkbox Checkbox Copy Editable Example <c-stack spacing="10" is-inline> <c-checkbox is-disabled>...
@chakra-ui/checkbox@2.2.8Compare github-actions released this 11 Jan 07:31 · 1522 commits to main since this release @chakra-ui/checkbox@2.2.8 21d0602 Patch Changes Updated dependencies []: @chakra-ui/form-control@2.0.15 @chakra-ui/visually-hidden@2.0.14...
theme/recipes checkbox.ts checkmark.ts 43 changes: 17 additions & 26 deletions 43 apps/compositions/src/examples/checkbox-with-colors.tsx Original file line numberDiff line numberDiff line change @@ -1,4 +1,4 @@ import { Stack, Text } from "@chakra-ui/react" import { For, Stack,...
具有使用状态的React.js Chakra UI多复选框可以通过以下步骤实现: 导入所需的库和组件: 代码语言:txt 复制 import React, { useState } from 'react'; import { Checkbox } from '@chakra-ui/react'; 在组件中定义状态: 代码语言:txt 复制 const [checkedItems, setCheckedItems] = useState([]); ...
我正在尝试在他们的文档中的Chakra-UI的“不确定”复选框示例中添加更多的复选框:https://chakra-ui.com/docs/form/checkbox 我似乎不能添加两个以上的复选框,同时仍然保留切换所有复选框和/或选择单个复选框的功能。理想情况下,我希望能够使用.map()方法添加x个复选框,并且能够分别选择每个复选框以及所有复...
CModalCloseButton: The button that closes the modal. import { CModal, CModalOverlay, CModalContent, CModalHeader, CModalFooter, CModalBody, CModalCloseButton, } from "@chakra-ui/vue"; Copy Usage# When the modal opens, focus is sent into the modal and set to the first tabbable element...
The official Chakra UI Figma Kit ⚡️. Get access to simple, modular and accessible components you need to design and build your applications. What's Included Extensive styles for typography, color and effects Component variants including size and state, now also with interactions ...
The action bar is designed to be controlled by table or checkbox selections. It provides a set of actions that can be performed on the selected items. import { ActionBar } from "@chakra-ui/react" <ActionBar.Root> <ActionBar.Positioner> <ActionBar.Content> <ActionBar.CloseTrigger /> <Act...
Let's try to build a bit more complex Login UI:App.tsxindex.tsx import { useFormik } from "formik"; import { Box, Button, Checkbox, Flex, FormControl, FormLabel, Input, VStack } from "@chakra-ui/react"; export default function App() { const formik = useFormik({ initialValues: {...