# Form Checkbox Inputs > `` and `` 是用来代替浏览器默认选择框的组件 **单选** ```html ``` **多选** ```html ``` 支持混合使用 `options` prop 和 `` 嵌套到 `` 中，但是 `` 组件会默认渲染到 `options` prop 渲染的选项下面，如果需要使 `` 渲染到 `options` prop 上面，请使用插槽 `first` ## 数组类型 options `options` 是一个数组，元素可以是字符串或者 `key-value` 对象，每一个元素可以有以下 key: - **`value`** 选项值，如果选中，会添加到 `v-model` 绑定的值中 - **`disabled`** 禁用当前选择，无法选中 - **`text`** 选项显示的文本 - **`html`** 选项显示的文本，是 html 字符串 `value` 类型可以是字符串，数字，简单对象. 请避免同一个 options 中不同元素的 `value` 类型不同. 如果 `text` 和 `html` 属性同时出现， `html` 属性会覆盖 `text`，即 `html` 属性的渲染的优先级比 `text` 高。 `html` 属性仅支持原生的 html 字符串，如果嵌入组件，是不生效的。注意并非所有的浏览器都会支持所有的 html 字符串。

注意: 使用 (html) 字符串的属性可能会引起脚本攻击 (XSS)，当用户使用这类属性的时候，您应该谨慎处理这类值

```js const options = [ "A", "B", "C", { text: "D", value: { d: 1 }, disabled: true }, "E", "F" ]; ``` 如果数组的元素全是字符串，这个字符串默认会被转为 `text` 和 `value` 支持在 `options` 中使用字符串和对象混合类型，详情请查看[对象数组 options](#对象数组) 在 NlyAdminlteVue 中，会自动把上面的 options 转化为 [对象数组 options](#对象数组) 格式: ```js const options = [ { text: "A", value: "A", disabled: false }, { text: "B", value: "B", disabled: false }, { text: "C", value: "C", disabled: false }, { text: "D", value: { d: 1 }, disabled: true }, { text: "E", value: "E", disabled: false }, { text: "F", value: "F", disabled: false } ]; ``` ### 对象数组 ```js const options = [ { text: "Item 1", value: "first" }, { text: "Item 2", value: "second" }, { html: "Item 3", value: "third", disabled: true }, { text: "Item 4" }, { text: "Item 5", value: { foo: "bar", baz: true } } ]; ``` 如果没有在数组的对象元素中定义 `value` 属性，`text` 属性既会渲染成 `text`, 又会渲染成 `value` 属性。如果使用的是 `html` 属性, 那必须提供一个 `value` 属性，否则会报错在 NlyAdminlteVue 中，会自动把上面的 options 转化为对象数组 options 格式: ```js const options = [ { text: "Item 1", value: "first", disabled: false }, { text: "Item 2", value: "second", disabled: false }, { html: "Item 3", value: "third", disabled: true }, { text: "Item 4", value: "Item 4", disabled: false }, { text: "Item 5", value: "E", disabled: false } ]; ``` ### 自定义 options 的属性名称如果您想用自定义的属性来代替 `text`, `value` 属性。比如使用 `name` 来代替 `text`, 可以通过 `text-field`, `html-field`, `value-field`, 和 `disabled-field` prop 来指定自定义的属性 ```html ``` ## 水平模式和堆叠模式 `` 组件默认是渲染成水平模式, `` 默认是渲染成块级堆叠模式. 可以设置 `` 的 prop `stacked` 使其渲染成堆叠式样如果 `` 不是嵌套在 `` 中，可以设置 `` 的 `inline` 使其渲染成水平模式 ```html ``` ## 大小使用 `size` prop 来控制大小，默认大小为 `md`, 可选 `sm` (small) and `lg` (large). ```html

Small

Default

Large

``` 如果需要控制 `` 组件的大小，可以设置 `size`，也可以设置 `` 的 `size` prop 通常情况下，如果不单独设置 `` 组件的大小, `` 组件会继承 `` 的大小 **注意:** 控制 check 的大小在 `adminlte3` 中是不支持的，这是 `NlyAdminlteVue` 自定义的 css 式样 ## 选择框的 values 和 `v-model` 默认情况下, `` 的值是 `true` （选中的时候）或者 `false` (未选中的时候). 支持自定义选中和未选中的值，使用 `value` 来自定义选中的，使用 `unchecked-value` 来自定义未选中的值 `v-model` 指令绑定值是 `checked` prop. 如使用的是多选框，你必须给 `v-model` 绑定一个数组类型(或者 `[]`)的变量，不要直接使用 `checked` **注意** - 如果 `v-model` 绑定的是一个多选框的值， `unchecked-value` 是无效的。 - 请您根据您的选择框类型来定义 `v-model` 绑定值的类型 - 如果 `` 组件嵌套在 `` 组件中，大部分的 prop 和 `v-model` 都会继承 `` 的值 - `unchecked-value` prop 并不会对原生的 `` 的 `value` 起作用，浏览器并不会在提交的时候提交未选择的选择框，所以您可以使用[单选框](#/docs/components/form-radio)来代替, 具体原因请查看[Vue has with native checkbox inputs](https://cn.vuejs.org/v2/guide/forms.html#%E9%80%89%E6%8B%A9%E6%A1%86). ### 多选框的辅助功能如果使用的是多选模式，您必须设置所有的在同一个 `` 组件中的 `` 的 `name` prop 为相同的值，或者只设置 `` 的 `name` prop。这样辅助技术才能识别他们为一组，并且启用本地键盘进行切换当使用多选模式的时候，建议把 `` 嵌套到 `` 中 ## 按钮模式支持设置 `` 渲染成按钮式样按钮模式下的 checkbox 在选中的时候会渲染一个 `.active` css 类型 ### 单选模式设置 prop `button` to `true` 会渲染成单选按钮模式设置 `button-variant` prop 能改变按钮的颜色，可选 adminlte3 的主题颜色按钮模式下， `inline` prop 不生效 ```html ``` ### 按钮组模式 ``组件的 prop `buttons` 可以把 `nly-form-checkbox` 渲染成按钮组设置 `button-variant` prop 可以改变按钮颜色 ```html ``` ## 开关模式 `` 和 `` 都支持开关模式. **Note:** 如果是 [按钮模式](#按钮模式), 开关模式不会生效 ### 单选开关模式设置 prop `switch` 为 `true`，单选 checkbox 会被渲染成开关 ```html ``` ### 多选开关模式设置 prop `switches` 为 `true` `` 会被渲染成开关组 ```html ``` ### 开关大小使用 `size` prop 来控制大小，默认大小为 `md`, 可选 `sm` (small) and `lg` (large). ```html

Small

Default

Large

``` 如果需要控制 `` 组件的大小，可以设置 `size`，也可以设置 `` 的 `size` prop 通常情况下，如果不单独设置 `` 组件的大小, `` 组件会继承 `` 的大小 **注意:** 控制 check 的大小在 `adminlte3` 中是不支持的，这是 `NlyAdminlteVue` 自定义的 css 式样 ## 原生 checkbox 设置 `plain` prop 可以使 `` or `` 渲染成一个原生的 checkbox ```html ``` **注意:** 原生 checkbox 的 prop `button` 和 `buttons` 无效 ## 校验状态 valid `Adminlte3` 的大部分表单组件都有状态 `invalid`, `valid`, `warning`, `novalid` - `invalid` : 无效状态 - `valid` : 有效状态 - `warning` : 警告状态 - `novalid` : 无状态 **注意:** valid **不支持** 按钮模式. ### feedback valid 状态 ```html ``` ### 表单必填 valid 状态如果使用单选 ``组件 , 且需要在 `nly-form` 组件中必填 , 你必须传入 `name` prop 和 `required` 给每个 `` 组件，这样 `nly-form` 的必填才会生效. 所有的绑定到同一个 `v-model` 值的 `` 组件必须设置相同的 `name` prop 对于辅助技术来说， prop `name` 是必传的，这样辅助技术才能识别 checkbox 属于哪个表单。 prop `required` 只有在设置了 prop `name` 才生效. 如果 `` 组件没有传入 prop `name`，会自动生成一个唯一的 `name` ## 自动聚焦 `` 组件设置 `autofocus` prop 时, 会自动聚焦到当前选择框。如果组件或者页面被 `` 缓存了，返回这个页面或者组件时，也会自动聚焦到当前选择框， ## 不定状态通常情况下，选择框只有选中和未选中两个状态，这时候 `unchecked-value` 和 `value` 可以是任何值。在视觉上，选择框有可以有三种状态，选中，未选中，不确定。 `` 支持通过 `indeterminate` prop 设置视觉上的不确定状态（默认为 false), 点击选择框会清除不确定状态，设置 `indeterminate` prop 并使用修饰符 `.sync`，来异步修改不确定状态 **注意:** indeterminate 模式在按钮模式和开关模式下不生效 **单选不确定模式** ```html ``` **多选不确定模式** ```html ``` **注意:** indeterminate 不支持按钮模式和多个单选框. ### 不确定状态和辅助线技术并不是所有的屏幕都支持不确定状态