CheckboxGroup 체크박스 그룹

CheckboxGroup 체크박스 그룹Github (GitHub)
리스트에서 여러 옵션을 선택하는 확인란 세트입니다.

Usage

v-model 지시문을 사용하여 CheckboxGroup의 값을 제어하거나 default-value prop의 상태를 제어할 필요가 없을 때 초기 값을 설정합니다.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
const value = ref(['System'])
</script>

<template>
  <UCheckboxGroup v-model="value" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
const value = ref(['System'])
</script>

<template>
  <UCheckboxGroup v-model="value" :items="items" />
</template>

Items 이미지

items prop을 문자열 또는 숫자의 배열로 사용합니다.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
const value = ref(['System'])
</script>

<template>
  <UCheckboxGroup v-model="value" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
const value = ref(['System'])
</script>

<template>
  <UCheckboxGroup v-model="value" :items="items" />
</template>

또한 다음 속성을 사용하여 객체 배열을 전달할 수 있습니다.

  • label?: string
  • description?: string (- description?: string)
  • value?: string
  • disabled?: boolean
  • icon?: string
  • class?: any (- class?: any)
  • ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, icon?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue } (- ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, icon?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue })

Matches your device settings.

Always uses the light theme.

Always uses the dark theme.

<script setup lang="ts">
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    description: 'Matches your device settings.',
    value: 'system'
  },
  {
    label: 'Light',
    description: 'Always uses the light theme.',
    value: 'light'
  },
  {
    label: 'Dark',
    description: 'Always uses the dark theme.',
    value: 'dark'
  }
])
const value = ref([
  'system'
])
</script>

<template>
  <UCheckboxGroup v-model="value" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    description: 'Matches your device settings.',
    value: 'system'
  },
  {
    label: 'Light',
    description: 'Always uses the light theme.',
    value: 'light'
  },
  {
    label: 'Dark',
    description: 'Always uses the dark theme.',
    value: 'dark'
  }
])
const value = ref([
  'system'
])
</script>

<template>
  <UCheckboxGroup v-model="value" :items="items" />
</template>
객체를 사용할 때는 v-model 지시문이나 default-value prop에서 객체의 value 속성을 참조해야 합니다.

값 키

value-key prop.Defaults 를 value로 사용하여 값을 설정하는 데 사용되는 속성을 변경할 수 있습니다.

Matches your device settings.

Always uses the light theme.

Always uses the dark theme.

<script setup lang="ts">
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    description: 'Matches your device settings.',
    id: 'system'
  },
  {
    label: 'Light',
    description: 'Always uses the light theme.',
    id: 'light'
  },
  {
    label: 'Dark',
    description: 'Always uses the dark theme.',
    id: 'dark'
  }
])
const value = ref([
  'light'
])
</script>

<template>
  <UCheckboxGroup v-model="value" value-key="id" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    description: 'Matches your device settings.',
    id: 'system'
  },
  {
    label: 'Light',
    description: 'Always uses the light theme.',
    id: 'light'
  },
  {
    label: 'Dark',
    description: 'Always uses the dark theme.',
    id: 'dark'
  }
])
const value = ref([
  'light'
])
</script>

<template>
  <UCheckboxGroup v-model="value" value-key="id" :items="items" />
</template>

범례

legend prop 를 사용하여 CheckboxGroup 의 범례를 설정합니다.

Theme
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup legend="Theme" :default-value="['System']" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup legend="Theme" :default-value="['System']" :items="items" />
</template>

Color 색상

color prop 를 사용하여 CheckboxGroup 의 색상을 변경합니다.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup color="neutral" :default-value="['System']" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup color="neutral" :default-value="['System']" :items="items" />
</template>

변형

variant prop 를 사용하여 CheckboxGroup 의 변형을 변경합니다.

<script setup lang="ts">
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    value: 'system',
    description: 'Matches your device settings.'
  },
  {
    label: 'Light',
    value: 'light',
    description: 'Always uses the light theme.'
  },
  {
    label: 'Dark',
    value: 'dark',
    description: 'Always uses the dark theme.'
  }
])
</script>

<template>
  <UCheckboxGroup color="primary" variant="card" :default-value="['system']" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    value: 'system',
    description: 'Matches your device settings.'
  },
  {
    label: 'Light',
    value: 'light',
    description: 'Always uses the light theme.'
  },
  {
    label: 'Dark',
    value: 'dark',
    description: 'Always uses the dark theme.'
  }
])
</script>

<template>
  <UCheckboxGroup color="primary" variant="card" :default-value="['system']" :items="items" />
</template>

Size

size prop 를 사용하여 CheckboxGroup 의 크기를 변경합니다.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup size="xl" variant="list" :default-value="['System']" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup size="xl" variant="list" :default-value="['System']" :items="items" />
</template>

방향

orientation prop을 사용하여 CheckboxGroup.기본값은 vertical로 변경합니다.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup
    orientation="horizontal"
    variant="list"
    :default-value="['System']"
    :items="items"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup
    orientation="horizontal"
    variant="list"
    :default-value="['System']"
    :items="items"
  />
</template>

Indicator (### 표시기)

indicator 소품을 사용하여 위치를 변경하거나 지시자를 숨깁니다. 기본값은 start입니다.

항목의 icon는 표시기가 보이는 동안 확인 표시를 대체하고 hidden일 때는 레이블 위에 표시됩니다.
<script setup lang="ts">
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    icon: 'i-lucide-monitor',
    value: 'System',
    class: 'w-20'
  },
  {
    label: 'Light',
    icon: 'i-lucide-sun',
    class: 'w-20',
    value: 'Light'
  },
  {
    label: 'Dark',
    icon: 'i-lucide-moon',
    class: 'w-20',
    value: 'Dark'
  }
])
</script>

<template>
  <UCheckboxGroup
    indicator="hidden"
    orientation="horizontal"
    variant="table"
    :default-value="['System']"
    :items="items"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    icon: 'i-lucide-monitor',
    value: 'System',
    class: 'w-20'
  },
  {
    label: 'Light',
    icon: 'i-lucide-sun',
    class: 'w-20',
    value: 'Light'
  },
  {
    label: 'Dark',
    icon: 'i-lucide-moon',
    class: 'w-20',
    value: 'Dark'
  }
])
</script>

<template>
  <UCheckboxGroup
    indicator="hidden"
    orientation="horizontal"
    variant="table"
    :default-value="['System']"
    :items="items"
  />
</template>

비활성 화 됨

disabled prop 를 사용하여 CheckboxGroup 을 비활성화합니다.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup disabled :default-value="['System']" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup disabled :default-value="['System']" :items="items" />
</template>

API 파일

Props (### Props)

Prop Default Type
as
'div'
any

The element or component this component should render as.

legend
string
valueKey
'value'
VK

When items is an array of objects, select the field to use as the value.

labelKey
'label'
keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>

When items is an array of objects, select the field to use as the label.

descriptionKey
'description'
keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>

When items is an array of objects, select the field to use as the description.

items
T
modelValue
GetItemValue<T, VK, undefined, NestedItem<T>>[]

The controlled value of the CheckboxGroup. Can be bind as v-model.

defaultValue
GetItemValue<T, VK, undefined, NestedItem<T>>[]

The value of the CheckboxGroup when initially rendered. Use when you do not need to control the state of the CheckboxGroup.

size
'md'
"xs" | "sm" | "md" | "lg" | "xl"
variant
'list'
"table" | "list" | "card"
orientation
'vertical'
"horizontal" | "vertical"

The orientation the checkbox buttons are laid out.

disabled
boolean

When true, prevents the user from interacting with the checkboxes

loop
false
boolean

Whether keyboard navigation should loop around

name
string

The name of the field. Submitted with its owning form as part of a name/value pair.

required
boolean

When true, indicates that the user must set the value before the owning form can be submitted.

icon
appConfig.ui.icons.check
any

The icon displayed when checked, or above the label when indicator is hidden.

color
'primary'
"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
highlight
boolean

Highlight the ring color like a focus state.

indicator
'start'
"start" | "end" | "hidden"

Position of the indicator.

ui
{ root?: SlotClass; fieldset?: SlotClass; legend?: SlotClass; item?: SlotClass; } & { root?: SlotClass; container?: SlotClass; base?: SlotClass; indicator?: SlotClass; icon?: SlotClass; wrapper?: SlotClass; label?: SlotClass; description?: SlotClass; }

Slots

Slot Type
legend
{}
label
{ item: T[number] & { id: string; }; }
description
{ item: T[number] & { id: string; }; }

Emits

Event Type
update:modelValue
[value: GetItemValue<T, VK, undefined, NestedItem<T>>[]]
change
[event: Event]

Theme 테마

app.config.ts
export default defineAppConfig({
  ui: {
    checkboxGroup: {
      slots: {
        root: 'relative',
        fieldset: 'flex gap-x-2',
        legend: 'mb-1 block font-medium text-default',
        item: ''
      },
      variants: {
        orientation: {
          horizontal: {
            fieldset: 'flex-row'
          },
          vertical: {
            fieldset: 'flex-col'
          }
        },
        color: {
          primary: {},
          secondary: {},
          success: {},
          info: {},
          warning: {},
          error: {},
          neutral: {}
        },
        variant: {
          list: {
            fieldset: 'flex-wrap'
          },
          card: {
            fieldset: 'flex-wrap'
          },
          table: {
            item: [
              'border border-default hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50',
              'transition-colors'
            ]
          }
        },
        size: {
          xs: {
            fieldset: 'gap-y-0.5',
            legend: 'text-xs'
          },
          sm: {
            fieldset: 'gap-y-0.5',
            legend: 'text-xs'
          },
          md: {
            fieldset: 'gap-y-1',
            legend: 'text-sm'
          },
          lg: {
            fieldset: 'gap-y-1',
            legend: 'text-sm'
          },
          xl: {
            fieldset: 'gap-y-1.5',
            legend: 'text-base'
          }
        },
        required: {
          true: {
            legend: "after:content-['*'] after:ms-0.5 after:text-error"
          }
        },
        highlight: {
          true: {},
          false: {}
        },
        disabled: {
          true: {}
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: 'table',
          class: {
            item: 'outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]'
          }
        },
        {
          color: 'neutral',
          variant: 'table',
          class: {
            item: 'outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1]'
          }
        },
        {
          variant: 'table',
          highlight: false,
          class: {
            item: 'hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented'
          }
        },
        {
          size: 'xs',
          variant: 'table',
          class: {
            item: 'p-2.5'
          }
        },
        {
          size: 'sm',
          variant: 'table',
          class: {
            item: 'p-3'
          }
        },
        {
          size: 'md',
          variant: 'table',
          class: {
            item: 'p-3.5'
          }
        },
        {
          size: 'lg',
          variant: 'table',
          class: {
            item: 'p-4'
          }
        },
        {
          size: 'xl',
          variant: 'table',
          class: {
            item: 'p-4.5'
          }
        },
        {
          orientation: 'horizontal',
          variant: 'table',
          class: {
            item: 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg',
            fieldset: 'gap-0 -space-x-px'
          }
        },
        {
          orientation: 'vertical',
          variant: 'table',
          class: {
            item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg',
            fieldset: 'gap-0 -space-y-px'
          }
        },
        {
          color: 'primary',
          variant: 'table',
          class: {
            item: 'has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]'
          }
        },
        {
          color: 'neutral',
          variant: 'table',
          class: {
            item: 'has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]'
          }
        },
        {
          variant: 'table',
          disabled: true,
          class: {
            item: 'cursor-not-allowed'
          }
        }
      ],
      defaultVariants: {
        highlight: false,
        size: 'md',
        variant: 'list',
        color: 'primary'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        checkboxGroup: {
          slots: {
            root: 'relative',
            fieldset: 'flex gap-x-2',
            legend: 'mb-1 block font-medium text-default',
            item: ''
          },
          variants: {
            orientation: {
              horizontal: {
                fieldset: 'flex-row'
              },
              vertical: {
                fieldset: 'flex-col'
              }
            },
            color: {
              primary: {},
              secondary: {},
              success: {},
              info: {},
              warning: {},
              error: {},
              neutral: {}
            },
            variant: {
              list: {
                fieldset: 'flex-wrap'
              },
              card: {
                fieldset: 'flex-wrap'
              },
              table: {
                item: [
                  'border border-default hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50',
                  'transition-colors'
                ]
              }
            },
            size: {
              xs: {
                fieldset: 'gap-y-0.5',
                legend: 'text-xs'
              },
              sm: {
                fieldset: 'gap-y-0.5',
                legend: 'text-xs'
              },
              md: {
                fieldset: 'gap-y-1',
                legend: 'text-sm'
              },
              lg: {
                fieldset: 'gap-y-1',
                legend: 'text-sm'
              },
              xl: {
                fieldset: 'gap-y-1.5',
                legend: 'text-base'
              }
            },
            required: {
              true: {
                legend: "after:content-['*'] after:ms-0.5 after:text-error"
              }
            },
            highlight: {
              true: {},
              false: {}
            },
            disabled: {
              true: {}
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: 'table',
              class: {
                item: 'outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]'
              }
            },
            {
              color: 'neutral',
              variant: 'table',
              class: {
                item: 'outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1]'
              }
            },
            {
              variant: 'table',
              highlight: false,
              class: {
                item: 'hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented'
              }
            },
            {
              size: 'xs',
              variant: 'table',
              class: {
                item: 'p-2.5'
              }
            },
            {
              size: 'sm',
              variant: 'table',
              class: {
                item: 'p-3'
              }
            },
            {
              size: 'md',
              variant: 'table',
              class: {
                item: 'p-3.5'
              }
            },
            {
              size: 'lg',
              variant: 'table',
              class: {
                item: 'p-4'
              }
            },
            {
              size: 'xl',
              variant: 'table',
              class: {
                item: 'p-4.5'
              }
            },
            {
              orientation: 'horizontal',
              variant: 'table',
              class: {
                item: 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg',
                fieldset: 'gap-0 -space-x-px'
              }
            },
            {
              orientation: 'vertical',
              variant: 'table',
              class: {
                item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg',
                fieldset: 'gap-0 -space-y-px'
              }
            },
            {
              color: 'primary',
              variant: 'table',
              class: {
                item: 'has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]'
              }
            },
            {
              color: 'neutral',
              variant: 'table',
              class: {
                item: 'has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]'
              }
            },
            {
              variant: 'table',
              disabled: true,
              class: {
                item: 'cursor-not-allowed'
              }
            }
          ],
          defaultVariants: {
            highlight: false,
            size: 'md',
            variant: 'list',
            color: 'primary'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

변경 로그

No recent changes

Checkbox

An input element to toggle between checked and unchecked states.

ColorPicker

A component to select a color.