mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
78 lines
34 KiB
HTML
78 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Checkbox | Element Plus</title>
|
|
<meta name="description" content="A VitePress site">
|
|
<link rel="stylesheet" href="/assets/style.50513294.css">
|
|
<link rel="modulepreload" href="/assets/framework.9d618830.js">
|
|
<link rel="modulepreload" href="/assets/framework.b3e0f3f4.js">
|
|
<link rel="modulepreload" href="/assets/_commonjsHelpers.4e997714.js">
|
|
<link rel="modulepreload" href="/assets/dayjs.min.c5c5e36b.js">
|
|
<link rel="modulepreload" href="/assets/index.88a5b812.js">
|
|
<link rel="modulepreload" href="/assets/plugin-vue_export-helper.21dcd24c.js">
|
|
<link rel="modulepreload" href="/assets/index.dd5af244.js">
|
|
<link rel="modulepreload" href="/assets/arrow-left.6a9fef20.js">
|
|
<link rel="modulepreload" href="/assets/arrow-right.b9c2382b.js">
|
|
<link rel="modulepreload" href="/assets/index.57fffc36.js">
|
|
<link rel="modulepreload" href="/assets/index.3df80c16.js">
|
|
<link rel="modulepreload" href="/assets/plugin-vue_export-helper.3e8d7f48.js">
|
|
<link rel="modulepreload" href="/assets/circle-plus.7955e1fb.js">
|
|
<link rel="modulepreload" href="/assets/calendar.06a1cd13.js">
|
|
<link rel="modulepreload" href="/assets/caret-bottom.cb669814.js">
|
|
<link rel="modulepreload" href="/assets/chat-round.3ba9b821.js">
|
|
<link rel="modulepreload" href="/assets/check.8cdf8a06.js">
|
|
<link rel="modulepreload" href="/assets/icon.a33c2435.js">
|
|
<link rel="modulepreload" href="/assets/delete.33f09fa3.js">
|
|
<link rel="modulepreload" href="/assets/document.d74840f3.js">
|
|
<link rel="modulepreload" href="/assets/zoom-in.c66e5e1b.js">
|
|
<link rel="modulepreload" href="/assets/edit.7c4b3d8b.js">
|
|
<link rel="modulepreload" href="/assets/star.cdbbe898.js">
|
|
<link rel="modulepreload" href="/assets/info-filled.84207de0.js">
|
|
<link rel="modulepreload" href="/assets/user.36a2bdda.js">
|
|
<link rel="modulepreload" href="/assets/loading.1bde6eb4.js">
|
|
<link rel="modulepreload" href="/assets/location.f19d03a2.js">
|
|
<link rel="modulepreload" href="/assets/setting.5fba44ab.js">
|
|
<link rel="modulepreload" href="/assets/message.7a46499a.js">
|
|
<link rel="modulepreload" href="/assets/minus.49152551.js">
|
|
<link rel="modulepreload" href="/assets/more-filled.6e1aaf44.js">
|
|
<link rel="modulepreload" href="/assets/picture.c2f3d3ab.js">
|
|
<link rel="modulepreload" href="/assets/plus.40ded492.js">
|
|
<link rel="modulepreload" href="/assets/search.a7705432.js">
|
|
<link rel="modulepreload" href="/assets/share.11b4c2a4.js">
|
|
<link rel="modulepreload" href="/assets/star-filled.f30711b6.js">
|
|
<link rel="modulepreload" href="/assets/timer.560ef1e5.js">
|
|
<link rel="modulepreload" href="/assets/upload-filled.354dcdf9.js">
|
|
<link rel="modulepreload" href="/assets/upload.4a395a17.js">
|
|
<link rel="modulepreload" href="/assets/user-filled.dc481954.js">
|
|
<link rel="modulepreload" href="/assets/view.b7824847.js">
|
|
<link rel="modulepreload" href="/assets/index.6e759cca.js">
|
|
<link rel="modulepreload" href="/assets/popup-manager.914e6b9a.js">
|
|
<link rel="modulepreload" href="/assets/plugin-vue_export-helper.68515fcc.js">
|
|
<link rel="modulepreload" href="/assets/dom.a7b992ee.js">
|
|
<link rel="modulepreload" href="/assets/index.730e0be4.js">
|
|
<link rel="modulepreload" href="/assets/index.6d4c610b.js">
|
|
<link rel="modulepreload" href="/assets/index.c5f129fe.js">
|
|
<link rel="modulepreload" href="/assets/index.c6c3533f.js">
|
|
<link rel="modulepreload" href="/assets/with-border.fb6a61e2.js">
|
|
<link rel="modulepreload" href="/assets/en-US_component_checkbox.md.ebb90678.lean.js">
|
|
<link rel="modulepreload" href="/assets/app.39b91261.js">
|
|
|
|
<link rel="icon" href="/images/element-plus-logo-small.svg">
|
|
<link rel="stylesheet" href="//fonts.loli.net/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap">
|
|
<link rel="stylesheet" href="//unpkg.com/nprogress@0.2.0/nprogress.css">
|
|
<script>(()=>{window.supportedLangs=["en-US","zh-CN"]})();</script>
|
|
<script>(()=>{const o=window.supportedLangs,a="preferred_lang",s="en-US",c={en:"en-US",fr:"fr-FR",es:"es-ES"};let t=localStorage.getItem(a)||navigator.language;const n=c[t]||(o.includes(t)?t:s);if(localStorage.setItem(a,n),t=n,!location.pathname.startsWith(`/${t}`)){const e=[`/${t}`].concat(location.pathname.split("/").slice(2)).join("/");location.pathname=e.endsWith(".html")||e.endsWith("/")?e:e.concat("/")}})();</script>
|
|
<script async="true" src="https://www.googletagmanager.com/gtag/js?id=UA-175337989-1"></script>
|
|
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","UA-175337989-1");</script>
|
|
<meta name="twitter:title" content="Checkbox | Element Plus">
|
|
<meta property="og:title" content="Checkbox | Element Plus">
|
|
</head>
|
|
<body>
|
|
<div id="app"><div class="App"><!----><header class="navbar has-sidebar"><div class="navbar-wrapper" data-v-6f4bb8ce><div class="container" data-v-6f4bb8ce><div class="logo-container" data-v-6f4bb8ce><a href="/" data-v-6f4bb8ce><img class="logo" src="/images/element-plus-logo.svg" alt="Elemenet Plus Logo" data-v-6f4bb8ce></a></div><div class="content" data-v-6f4bb8ce><div id="docsearch" class="algolia-search-box search" data-v-6f4bb8ce></div><nav class="navbar-menu menu" data-v-6f4bb8ce><!--[--><!----><!----><!----><!----><!--]--></nav><!----><div class="translation-container translation" data-v-6f4bb8ce data-v-1e752d22><!----></div><div class="social-links" data-v-6f4bb8ce data-v-16ed5a92><!--[--><a href="https://github.com/element-plus/element-plus" title="GitHub" target="_blank" rel="noreferrer noopener" class="social-link" data-v-16ed5a92 data-v-4d8591cc><i class="el-icon" style="font-size:20px;" data-v-4d8591cc><!--[--><svg width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" data-v-4d8591cc><path d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z" fill="currentColor"></path></svg><!--]--></i></a><!--]--></div><div class="menu-hamburger hamburger" role="button" data-v-6f4bb8ce><span class="hamburger-1"></span><span class="hamburger-2"></span><span class="hamburger-3"></span></div></div></div></div><!----></header><div class="sub-nav"><div class="sidebar-button"><i class="el-icon" style="font-size:24px;"><!--[--><svg viewbox="0 0 24 24"><g fill="none"><path d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z" fill="currentColor"></path><path d="M4 18a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z" fill="currentColor"></path><path d="M11 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-8z" fill="currentColor"></path></g></svg><!--]--></i></div><button class="el-button el-button--text el-button--default go-back-top" type="button" style=""><!--v-if--><span class=""><!--[-->Back to top<!--]--></span></button></div><aside class="sidebar"><!--[--><div class="sponsors" data-v-670cc81e><p class="sponsors-title" data-v-670cc81e>Sponsored by</p><div class="sponsor-item" data-v-670cc81e data-v-ab191046><a href="https://www.jnpfsoft.com/index.html?from=elementUI" title="jnpfsoft" target="_blank" data-v-ab191046><img src="/images/jnpfsoft.jpg" alt="jnpfsoft" data-v-ab191046></a></div><div class="container" data-v-670cc81e><!--[--><div class="sponsor-item" data-v-670cc81e data-v-0514baed><a href="https://bit.dev/?from=element-ui" title="bit" target="_blank" data-v-0514baed><img src="/images/bit.svg" alt="bit" data-v-0514baed></a></div><div class="sponsor-item" data-v-670cc81e data-v-0514baed><a href="https://www.renren.io/?from=element-ui" title="renren.io" target="_blank" data-v-0514baed><img src="/images/renren.png" alt="renren.io" data-v-0514baed></a></div><!--]--></div></div><!--]--><div class="sidebar-groups"><!--[--><section class="sidebar-group"><p class="sidebar-group__title">Basic</p><!--[--><a class="link" href="/en-US/component/button" data-v-7c07d156><p class="link-text" data-v-7c07d156>Button</p></a><a class="link" href="/en-US/component/border" data-v-7c07d156><p class="link-text" data-v-7c07d156>Border</p></a><a class="link" href="/en-US/component/color" data-v-7c07d156><p class="link-text" data-v-7c07d156>Color</p></a><a class="link" href="/en-US/component/container" data-v-7c07d156><p class="link-text" data-v-7c07d156>Layout Container</p></a><a class="link" href="/en-US/component/icon" data-v-7c07d156><p class="link-text" data-v-7c07d156>Icon</p></a><a class="link" href="/en-US/component/layout" data-v-7c07d156><p class="link-text" data-v-7c07d156>Layout</p></a><a class="link" href="/en-US/component/link" data-v-7c07d156><p class="link-text" data-v-7c07d156>Link</p></a><a class="link" href="/en-US/component/scrollbar" data-v-7c07d156><p class="link-text" data-v-7c07d156>Scrollbar</p></a><a class="link" href="/en-US/component/space" data-v-7c07d156><p class="link-text" data-v-7c07d156>Space</p></a><a class="link" href="/en-US/component/typography" data-v-7c07d156><p class="link-text" data-v-7c07d156>Typography</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Configuration</p><!--[--><a class="link" href="/en-US/component/config-provider" data-v-7c07d156><p class="link-text" data-v-7c07d156>Config Provider</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Form</p><!--[--><a class="link" href="/en-US/component/cascader" data-v-7c07d156><p class="link-text" data-v-7c07d156>Cascader</p></a><a class="link active" href="/en-US/component/checkbox" data-v-7c07d156><p class="link-text" data-v-7c07d156>Checkbox</p></a><a class="link" href="/en-US/component/color-picker" data-v-7c07d156><p class="link-text" data-v-7c07d156>Color Picker</p></a><a class="link" href="/en-US/component/date-picker" data-v-7c07d156><p class="link-text" data-v-7c07d156>Date Picker</p></a><a class="link" href="/en-US/component/datetime-picker" data-v-7c07d156><p class="link-text" data-v-7c07d156>DateTime Picker</p></a><a class="link" href="/en-US/component/form" data-v-7c07d156><p class="link-text" data-v-7c07d156>Form</p></a><a class="link" href="/en-US/component/input" data-v-7c07d156><p class="link-text" data-v-7c07d156>Input</p></a><a class="link" href="/en-US/component/input-number" data-v-7c07d156><p class="link-text" data-v-7c07d156>Input Number</p></a><a class="link" href="/en-US/component/radio" data-v-7c07d156><p class="link-text" data-v-7c07d156>Radio</p></a><a class="link" href="/en-US/component/rate" data-v-7c07d156><p class="link-text" data-v-7c07d156>Rate</p></a><a class="link" href="/en-US/component/select" data-v-7c07d156><p class="link-text" data-v-7c07d156>Select</p></a><a class="link" href="/en-US/component/select-v2" data-v-7c07d156><p class="link-text" data-v-7c07d156>Virtualized Select</p></a><a class="link" href="/en-US/component/slider" data-v-7c07d156><p class="link-text" data-v-7c07d156>Slider</p></a><a class="link" href="/en-US/component/switch" data-v-7c07d156><p class="link-text" data-v-7c07d156>Switch</p></a><a class="link" href="/en-US/component/time-picker" data-v-7c07d156><p class="link-text" data-v-7c07d156>Time Picker</p></a><a class="link" href="/en-US/component/time-select" data-v-7c07d156><p class="link-text" data-v-7c07d156>Time Select</p></a><a class="link" href="/en-US/component/transfer" data-v-7c07d156><p class="link-text" data-v-7c07d156>Transfer</p></a><a class="link" href="/en-US/component/upload" data-v-7c07d156><p class="link-text" data-v-7c07d156>Upload</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Data</p><!--[--><a class="link" href="/en-US/component/avatar" data-v-7c07d156><p class="link-text" data-v-7c07d156>Avatar</p></a><a class="link" href="/en-US/component/badge" data-v-7c07d156><p class="link-text" data-v-7c07d156>Badge</p></a><a class="link" href="/en-US/component/calendar" data-v-7c07d156><p class="link-text" data-v-7c07d156>Calendar</p></a><a class="link" href="/en-US/component/card" data-v-7c07d156><p class="link-text" data-v-7c07d156>Card</p></a><a class="link" href="/en-US/component/carousel" data-v-7c07d156><p class="link-text" data-v-7c07d156>Carousel</p></a><a class="link" href="/en-US/component/collapse" data-v-7c07d156><p class="link-text" data-v-7c07d156>Collapse</p></a><a class="link" href="/en-US/component/descriptions" data-v-7c07d156><p class="link-text" data-v-7c07d156>Descriptions</p></a><a class="link" href="/en-US/component/empty" data-v-7c07d156><p class="link-text" data-v-7c07d156>Empty</p></a><a class="link" href="/en-US/component/image" data-v-7c07d156><p class="link-text" data-v-7c07d156>Image</p></a><a class="link" href="/en-US/component/infinite-scroll" data-v-7c07d156><p class="link-text" data-v-7c07d156>Infinite Scroll</p></a><a class="link" href="/en-US/component/pagination" data-v-7c07d156><p class="link-text" data-v-7c07d156>Pagination</p></a><a class="link" href="/en-US/component/progress" data-v-7c07d156><p class="link-text" data-v-7c07d156>Progress</p></a><a class="link" href="/en-US/component/result" data-v-7c07d156><p class="link-text" data-v-7c07d156>Result</p></a><a class="link" href="/en-US/component/skeleton" data-v-7c07d156><p class="link-text" data-v-7c07d156>Skeleton</p></a><a class="link" href="/en-US/component/table" data-v-7c07d156><p class="link-text" data-v-7c07d156>Table</p></a><a class="link" href="/en-US/component/tag" data-v-7c07d156><p class="link-text" data-v-7c07d156>Tag</p></a><a class="link" href="/en-US/component/timeline" data-v-7c07d156><p class="link-text" data-v-7c07d156>Timeline</p></a><a class="link" href="/en-US/component/tree" data-v-7c07d156><p class="link-text" data-v-7c07d156>Tree</p></a><a class="link" href="/en-US/component/tree-v2" data-v-7c07d156><p class="link-text" data-v-7c07d156>Virtualized Tree</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Navigation</p><!--[--><a class="link" href="/en-US/component/affix" data-v-7c07d156><p class="link-text" data-v-7c07d156>Affix</p></a><a class="link" href="/en-US/component/breadcrumb" data-v-7c07d156><p class="link-text" data-v-7c07d156>Breadcrumb</p></a><a class="link" href="/en-US/component/dropdown" data-v-7c07d156><p class="link-text" data-v-7c07d156>Dropdown</p></a><a class="link" href="/en-US/component/menu" data-v-7c07d156><p class="link-text" data-v-7c07d156>Menu</p></a><a class="link" href="/en-US/component/page-header" data-v-7c07d156><p class="link-text" data-v-7c07d156>Page Header</p></a><a class="link" href="/en-US/component/steps" data-v-7c07d156><p class="link-text" data-v-7c07d156>Steps</p></a><a class="link" href="/en-US/component/tabs" data-v-7c07d156><p class="link-text" data-v-7c07d156>Tabs</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Feedback</p><!--[--><a class="link" href="/en-US/component/alert" data-v-7c07d156><p class="link-text" data-v-7c07d156>Alert</p></a><a class="link" href="/en-US/component/dialog" data-v-7c07d156><p class="link-text" data-v-7c07d156>Dialog</p></a><a class="link" href="/en-US/component/drawer" data-v-7c07d156><p class="link-text" data-v-7c07d156>Drawer</p></a><a class="link" href="/en-US/component/loading" data-v-7c07d156><p class="link-text" data-v-7c07d156>Loading</p></a><a class="link" href="/en-US/component/message" data-v-7c07d156><p class="link-text" data-v-7c07d156>Message</p></a><a class="link" href="/en-US/component/message-box" data-v-7c07d156><p class="link-text" data-v-7c07d156>Message Box</p></a><a class="link" href="/en-US/component/notification" data-v-7c07d156><p class="link-text" data-v-7c07d156>Notification</p></a><a class="link" href="/en-US/component/popconfirm" data-v-7c07d156><p class="link-text" data-v-7c07d156>Pop Confirm</p></a><a class="link" href="/en-US/component/popover" data-v-7c07d156><p class="link-text" data-v-7c07d156>Popover</p></a><a class="link" href="/en-US/component/tooltip" data-v-7c07d156><p class="link-text" data-v-7c07d156>Tooltip</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Others</p><!--[--><a class="link" href="/en-US/component/backtop" data-v-7c07d156><p class="link-text" data-v-7c07d156>Backtop</p></a><a class="link" href="/en-US/component/divider" data-v-7c07d156><p class="link-text" data-v-7c07d156>Divider</p></a><!--]--></section><!--]--></div><!--[--><!--]--></aside><main class="page-content has-sidebar"><div class="doc-content-wrapper"><div class="doc-content-container"><div style="position:relative;" class="doc-content"><div><h1 id="checkbox" tabindex="-1">Checkbox <a class="header-anchor" href="#checkbox" aria-hidden="true">#</a></h1><p>A group of options for multiple choices.</p><h2 id="basic-usage" tabindex="-1">Basic usage <a class="header-anchor" href="#basic-usage" aria-hidden="true">#</a></h2><p>Checkbox can be used alone to switch between two states.</p><!----><h2 id="disabled-state" tabindex="-1">Disabled State <a class="header-anchor" href="#disabled-state" aria-hidden="true">#</a></h2><p>Disabled state for checkbox.</p><!----><h2 id="checkbox-group" tabindex="-1">Checkbox group <a class="header-anchor" href="#checkbox-group" aria-hidden="true">#</a></h2><p>It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.</p><!----><h2 id="indeterminate" tabindex="-1">Indeterminate <a class="header-anchor" href="#indeterminate" aria-hidden="true">#</a></h2><p>The <code>indeterminate</code> property can help you to achieve a 'check all' effect.</p><!----><h2 id="minimum-maximum-items-checked" tabindex="-1">Minimum / Maximum items checked <a class="header-anchor" href="#minimum-maximum-items-checked" aria-hidden="true">#</a></h2><p>The <code>min</code> and <code>max</code> properties can help you to limit the number of checked items.</p><!----><h2 id="button-style" tabindex="-1">Button style <a class="header-anchor" href="#button-style" aria-hidden="true">#</a></h2><p>Checkbox with button styles.</p><!----><h2 id="with-borders" tabindex="-1">With borders <a class="header-anchor" href="#with-borders" aria-hidden="true">#</a></h2><!----><h2 id="checkbox-attributes" tabindex="-1">Checkbox Attributes <a class="header-anchor" href="#checkbox-attributes" aria-hidden="true">#</a></h2><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>model-value / v-model</td><td>binding value</td><td>string / number / boolean</td><td>—</td><td>—</td></tr><tr><td>label</td><td>value of the Checkbox when used inside a <code>checkbox-group</code></td><td>string / number / boolean / object</td><td>—</td><td>—</td></tr><tr><td>true-label</td><td>value of the Checkbox if it's checked</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>false-label</td><td>value of the Checkbox if it's not checked</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>disabled</td><td>whether the Checkbox is disabled</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>border</td><td>whether to add a border around Checkbox</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>size</td><td>size of the Checkbox</td><td>string</td><td>large / default /small</td><td>—</td></tr><tr><td>name</td><td>native 'name' attribute</td><td>string</td><td>—</td><td>—</td></tr><tr><td>checked</td><td>if the Checkbox is checked</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>indeterminate</td><td>same as <code>indeterminate</code> in native checkbox</td><td>boolean</td><td>—</td><td>false</td></tr></tbody></table><h2 id="checkbox-events" tabindex="-1">Checkbox Events <a class="header-anchor" href="#checkbox-events" aria-hidden="true">#</a></h2><table><thead><tr><th>Event Name</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>change</td><td>triggers when the binding value changes</td><td>the updated value</td></tr></tbody></table><h2 id="checkbox-slots" tabindex="-1">Checkbox Slots <a class="header-anchor" href="#checkbox-slots" aria-hidden="true">#</a></h2><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td>—</td><td>customize default content</td></tr></tbody></table><h2 id="checkbox-group-attributes" tabindex="-1">Checkbox-group Attributes <a class="header-anchor" href="#checkbox-group-attributes" aria-hidden="true">#</a></h2><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>model-value / v-model</td><td>binding value</td><td>array</td><td>—</td><td>[]</td></tr><tr><td>size</td><td>size of checkbox</td><td>string</td><td>large / default /small</td><td>—</td></tr><tr><td>disabled</td><td>whether the nesting checkboxes are disabled</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>min</td><td>minimum number of checkbox checked</td><td>number</td><td>—</td><td>—</td></tr><tr><td>max</td><td>maximum number of checkbox checked</td><td>number</td><td>—</td><td>—</td></tr><tr><td>text-color</td><td>font color when button is active</td><td>string</td><td>—</td><td>#ffffff</td></tr><tr><td>fill</td><td>border and background color when button is active</td><td>string</td><td>—</td><td>#409EFF</td></tr></tbody></table><h2 id="checkbox-group-events" tabindex="-1">Checkbox-group Events <a class="header-anchor" href="#checkbox-group-events" aria-hidden="true">#</a></h2><table><thead><tr><th>Event Name</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>change</td><td>triggers when the binding value changes</td><td>the updated value</td></tr></tbody></table><h2 id="checkbox-group-slots" tabindex="-1">Checkbox-group Slots <a class="header-anchor" href="#checkbox-group-slots" aria-hidden="true">#</a></h2><table><thead><tr><th>Name</th><th>Description</th><th>Subtags</th></tr></thead><tbody><tr><td>-</td><td>customize default content</td><td>Checkbox / Checkbox-button</td></tr></tbody></table><h2 id="checkbox-button-attributes" tabindex="-1">Checkbox-button Attributes <a class="header-anchor" href="#checkbox-button-attributes" aria-hidden="true">#</a></h2><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>label</td><td>value of the checkbox when used inside a <code>checkbox-group</code></td><td>string / number / boolean / object</td><td>—</td><td>—</td></tr><tr><td>true-label</td><td>value of the checkbox if it's checked</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>false-label</td><td>value of the checkbox if it's not checked</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>disabled</td><td>whether the checkbox is disabled</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>name</td><td>native 'name' attribute</td><td>string</td><td>—</td><td>—</td></tr><tr><td>checked</td><td>if the checkbox is checked</td><td>boolean</td><td>—</td><td>false</td></tr></tbody></table><h2 id="checkbox-button-slots" tabindex="-1">Checkbox-button Slots <a class="header-anchor" href="#checkbox-button-slots" aria-hidden="true">#</a></h2><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td>—</td><td>customize default content</td></tr></tbody></table></div></div><footer class="page-footer" data-v-d1dc05ac><div class="edit" data-v-d1dc05ac><div class="edit-link" data-v-d1dc05ac data-v-6ef31e8a><a class="link text-sm" href="https://github.com/element-plus/element-plus/edit/dev/docs/en-US/component/checkbox.md" target="_blank" rel="noopener noreferrer" data-v-6ef31e8a>Edit this page on GitHub <i class="el-icon" style="font-size:16px;vertical-align:text-top;line-height:24px;" data-v-6ef31e8a><!--[--><svg width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" data-v-6ef31e8a><path d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z" fill="currentColor"></path></svg><!--]--></i></a></div></div><div class="updated" data-v-d1dc05ac><p class="last-updated text-sm" data-v-d1dc05ac data-v-1caaffb8><span class="prefix" data-v-1caaffb8>Last Updated:</span><span class="datetime" data-v-1caaffb8></span></p></div></footer><div class="next-and-prev-link" data-v-74a5b853><div class="container" data-v-74a5b853><div class="prev" data-v-74a5b853><a class="link" href="/en-US/component/cascader" data-v-74a5b853><i class="el-icon" style="" data-v-74a5b853><!--[--><svg class="icon" width="200" height="200" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-74a5b853><path fill="currentColor" d="M609.408 149.376L277.76 489.6a32 32 0 000 44.672l331.648 340.352a29.12 29.12 0 0041.728 0 30.592 30.592 0 000-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 000-42.688 29.12 29.12 0 00-41.728 0z"></path></svg><!--]--></i><span class="text" data-v-74a5b853>Cascader</span></a></div><div class="next" data-v-74a5b853><a class="link" href="/en-US/component/color-picker" data-v-74a5b853><span class="text" data-v-74a5b853>Color Picker</span><i class="el-icon" style="" data-v-74a5b853><!--[--><svg class="icon" width="200" height="200" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-74a5b853><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 000 42.752L652.736 512 340.864 831.872a30.592 30.592 0 000 42.752 29.12 29.12 0 0041.728 0L714.24 534.336a32 32 0 000-44.672L382.592 149.376a29.12 29.12 0 00-41.728 0z"></path></svg><!--]--></i></a></div></div></div></div><aside ref_key="container" class="toc-wrapper"><nav class="toc-content"><h3 class="toc-content__heading">Contents</h3><ul class="toc-items"><!--[--><li class="toc-item"><a class="toc-link" href="#basic-usage">Basic usage</a><!----></li><li class="toc-item"><a class="toc-link" href="#disabled-state">Disabled State</a><!----></li><li class="toc-item"><a class="toc-link" href="#checkbox-group">Checkbox group</a><!----></li><li class="toc-item"><a class="toc-link" href="#indeterminate">Indeterminate</a><!----></li><li class="toc-item"><a class="toc-link" href="#minimum-maximum-items-checked">Minimum / Maximum items checked</a><!----></li><li class="toc-item"><a class="toc-link" href="#button-style">Button style</a><!----></li><li class="toc-item"><a class="toc-link" href="#with-borders">With borders</a><!----></li><li class="toc-item"><a class="toc-link" href="#checkbox-attributes">Checkbox Attributes</a><!----></li><li class="toc-item"><a class="toc-link" href="#checkbox-events">Checkbox Events</a><!----></li><li class="toc-item"><a class="toc-link" href="#checkbox-slots">Checkbox Slots</a><!----></li><li class="toc-item"><a class="toc-link" href="#checkbox-group-attributes">Checkbox-group Attributes</a><!----></li><li class="toc-item"><a class="toc-link" href="#checkbox-group-events">Checkbox-group Events</a><!----></li><li class="toc-item"><a class="toc-link" href="#checkbox-group-slots">Checkbox-group Slots</a><!----></li><li class="toc-item"><a class="toc-link" href="#checkbox-button-attributes">Checkbox-button Attributes</a><!----></li><li class="toc-item"><a class="toc-link" href="#checkbox-button-slots">Checkbox-button Slots</a><!----></li><!--]--></ul><div class="toc-marker"></div></nav></aside></div></main><!----></div></div>
|
|
<script>__VP_HASH_MAP__ = JSON.parse("{\"en-us_component_affix.md\":\"166c7d00\",\"en-us_component_alert.md\":\"f2fda570\",\"en-us_component_avatar.md\":\"88bace38\",\"en-us_component_backtop.md\":\"62539d8e\",\"en-us_component_badge.md\":\"b713e29b\",\"en-us_component_border.md\":\"7d167406\",\"en-us_component_breadcrumb.md\":\"63b79b7f\",\"en-us_component_button.md\":\"f415a2e0\",\"en-us_component_calendar.md\":\"828df8c7\",\"en-us_component_card.md\":\"65d6c60b\",\"en-us_component_carousel.md\":\"d22a19e3\",\"en-us_component_cascader.md\":\"743e5aec\",\"en-us_component_checkbox.md\":\"ebb90678\",\"en-us_component_collapse.md\":\"2828cf11\",\"en-us_component_color-picker.md\":\"069850f3\",\"en-us_component_color.md\":\"7bcbf493\",\"en-us_component_config-provider.md\":\"6dd51ddd\",\"en-us_component_container.md\":\"1ff1add6\",\"en-us_component_date-picker.md\":\"cf9104dd\",\"en-us_component_datetime-picker.md\":\"4e6d8a74\",\"en-us_component_descriptions.md\":\"d31c0024\",\"en-us_component_dialog.md\":\"c8652fd4\",\"en-us_component_divider.md\":\"6eee0759\",\"en-us_component_drawer.md\":\"14ed770a\",\"en-us_component_dropdown.md\":\"d31b47b6\",\"en-us_component_empty.md\":\"88f10dae\",\"en-us_component_form.md\":\"f4b82bdf\",\"en-us_component_icon.md\":\"1b901c2e\",\"en-us_component_image.md\":\"e2ebbbf8\",\"en-us_component_infinite-scroll.md\":\"dee7a19a\",\"en-us_component_input-number.md\":\"ca165757\",\"en-us_component_input.md\":\"204a4036\",\"en-us_component_layout.md\":\"092b3a60\",\"en-us_component_link.md\":\"fcde5df4\",\"en-us_component_loading.md\":\"340b6086\",\"en-us_component_menu.md\":\"cb3a4ec2\",\"en-us_component_message-box.md\":\"42eb3151\",\"en-us_component_message.md\":\"060dcaa4\",\"en-us_component_notification.md\":\"09f0492c\",\"en-us_component_page-header.md\":\"ce509a17\",\"en-us_component_pagination.md\":\"00482eba\",\"en-us_component_popconfirm.md\":\"4a5a2223\",\"en-us_component_popover.md\":\"c41ff42d\",\"en-us_component_progress.md\":\"242cf217\",\"en-us_component_radio.md\":\"231b8300\",\"en-us_component_rate.md\":\"4ad3d4f0\",\"en-us_component_result.md\":\"1cf785fe\",\"en-us_component_scrollbar.md\":\"4d11a5fc\",\"en-us_component_select-v2.md\":\"ec7bb5c0\",\"en-us_component_select.md\":\"60c70562\",\"en-us_component_skeleton.md\":\"d76c0dab\",\"en-us_component_slider.md\":\"df48e8d2\",\"en-us_component_space.md\":\"00962b5b\",\"en-us_component_steps.md\":\"7ffcc791\",\"en-us_component_switch.md\":\"a22e1b41\",\"en-us_component_table.md\":\"0e8e52db\",\"en-us_component_tabs.md\":\"684958a1\",\"en-us_component_tag.md\":\"aa2fa9a2\",\"en-us_component_time-picker.md\":\"760ef187\",\"en-us_component_time-select.md\":\"bbdcf043\",\"en-us_component_timeline.md\":\"6b697cd8\",\"en-us_component_tooltip.md\":\"4c0fed32\",\"en-us_component_transfer.md\":\"91805f55\",\"en-us_component_tree-v2.md\":\"6fecb20d\",\"en-us_component_tree.md\":\"fab3f53d\",\"en-us_component_typography.md\":\"0075ced1\",\"en-us_component_upload.md\":\"46b59727\",\"en-us_guide_changelog.md\":\"9bab6c78\",\"en-us_guide_design.md\":\"f861c434\",\"en-us_guide_i18n.md\":\"5473e7ca\",\"en-us_guide_installation.md\":\"2d033787\",\"en-us_guide_migration.md\":\"430bca18\",\"en-us_guide_nav.md\":\"e356ada3\",\"en-us_guide_quickstart.md\":\"243510bb\",\"en-us_guide_theming.md\":\"ac6f2ba2\",\"en-us_guide_transitions.md\":\"417ae97b\",\"en-us_index.md\":\"4464d531\",\"en-us_resource_index.md\":\"88eeb87d\",\"index.md\":\"b2a4c013\",\"zh-cn_component_affix.md\":\"42cc7402\",\"zh-cn_component_alert.md\":\"cd9647b8\",\"zh-cn_component_avatar.md\":\"2cf401a8\",\"zh-cn_component_backtop.md\":\"76b57d69\",\"zh-cn_component_badge.md\":\"906bf78e\",\"zh-cn_component_border.md\":\"aaee7e39\",\"zh-cn_component_breadcrumb.md\":\"251d04f7\",\"zh-cn_component_button.md\":\"84cdfb88\",\"zh-cn_component_calendar.md\":\"5b00fdec\",\"zh-cn_component_card.md\":\"57e5ae93\",\"zh-cn_component_carousel.md\":\"c025a37c\",\"zh-cn_component_cascader.md\":\"c8b9a237\",\"zh-cn_component_checkbox.md\":\"57254e41\",\"zh-cn_component_collapse.md\":\"2678fcbe\",\"zh-cn_component_color-picker.md\":\"ec4acd68\",\"zh-cn_component_color.md\":\"1c117715\",\"zh-cn_component_config-provider.md\":\"98b2f8fb\",\"zh-cn_component_container.md\":\"7fe74d42\",\"zh-cn_component_date-picker.md\":\"b92ff465\",\"zh-cn_component_datetime-picker.md\":\"e8ed9c0e\",\"zh-cn_component_descriptions.md\":\"1f10ae94\",\"zh-cn_component_dialog.md\":\"84a6011a\",\"zh-cn_component_divider.md\":\"a6f6b3a8\",\"zh-cn_component_drawer.md\":\"3b791f5f\",\"zh-cn_component_dropdown.md\":\"d106f6ee\",\"zh-cn_component_empty.md\":\"5e4e9973\",\"zh-cn_component_form.md\":\"92775cac\",\"zh-cn_component_icon.md\":\"6d85dc19\",\"zh-cn_component_image.md\":\"74e0fb7e\",\"zh-cn_component_infinite-scroll.md\":\"ebc0240d\",\"zh-cn_component_input-number.md\":\"eb9a6cd3\",\"zh-cn_component_input.md\":\"baa00cdc\",\"zh-cn_component_layout.md\":\"8d252d57\",\"zh-cn_component_link.md\":\"1c376ff5\",\"zh-cn_component_loading.md\":\"8d7b2f2e\",\"zh-cn_component_menu.md\":\"5fb159ff\",\"zh-cn_component_message-box.md\":\"e5c0047d\",\"zh-cn_component_message.md\":\"b11df528\",\"zh-cn_component_notification.md\":\"9a56984f\",\"zh-cn_component_page-header.md\":\"0313d5a7\",\"zh-cn_component_pagination.md\":\"c2e7e5b2\",\"zh-cn_component_popconfirm.md\":\"3fb6d5ce\",\"zh-cn_component_popover.md\":\"222eb1b9\",\"zh-cn_component_progress.md\":\"5656a04c\",\"zh-cn_component_radio.md\":\"edf5c55e\",\"zh-cn_component_rate.md\":\"c85ec991\",\"zh-cn_component_result.md\":\"37f67da6\",\"zh-cn_component_scrollbar.md\":\"1d45b2e8\",\"zh-cn_component_select-v2.md\":\"0b729f73\",\"zh-cn_component_select.md\":\"2ee8c735\",\"zh-cn_component_skeleton.md\":\"9cf1cad7\",\"zh-cn_component_slider.md\":\"beacd9cf\",\"zh-cn_component_space.md\":\"3fe3a741\",\"zh-cn_component_steps.md\":\"61fe1251\",\"zh-cn_component_switch.md\":\"64101ddf\",\"zh-cn_component_table.md\":\"9f390222\",\"zh-cn_component_tabs.md\":\"42a588f8\",\"zh-cn_component_tag.md\":\"f810a605\",\"zh-cn_component_time-picker.md\":\"b2a679bc\",\"zh-cn_component_time-select.md\":\"5f5dc0ac\",\"zh-cn_component_timeline.md\":\"92203552\",\"zh-cn_component_tooltip.md\":\"480bacbe\",\"zh-cn_component_transfer.md\":\"f49a8bde\",\"zh-cn_component_tree-v2.md\":\"a404a098\",\"zh-cn_component_tree.md\":\"acfe4204\",\"zh-cn_component_typography.md\":\"0f52690f\",\"zh-cn_component_upload.md\":\"91bb7cdc\",\"zh-cn_guide_changelog.md\":\"cfef3f83\",\"zh-cn_guide_design.md\":\"3c97b8b5\",\"zh-cn_guide_i18n.md\":\"67fac67c\",\"zh-cn_guide_installation.md\":\"d0112975\",\"zh-cn_guide_migration.md\":\"dc507038\",\"zh-cn_guide_nav.md\":\"f089b1cb\",\"zh-cn_guide_quickstart.md\":\"c57e3f74\",\"zh-cn_guide_theming.md\":\"a7496cf4\",\"zh-cn_guide_transitions.md\":\"bf43e3d9\",\"zh-cn_index.md\":\"550317bf\",\"zh-cn_resource_index.md\":\"9eef3c57\"}")</script>
|
|
<script type="module" async src="/assets/app.39b91261.js"></script>
|
|
|
|
</body>
|
|
</html> |