Checkbox 체크박스

LhCheckbox는 독립적인 불리언 값을 지원하고, LhCheckboxGroup은 여러 옵션의 배열 값을 지원합니다.

독립적으로 사용

독립적으로 사용

읽었으며 동의합니다

<script setup lang="ts">
import { ref } from 'vue'
import { LhCheckbox } from '@lh-ui/vue3'

const accepted = ref(false)
</script>

<template>
  <LhCheckbox v-model="accepted" label="읽었으며 동의합니다" />
</template>

<script>
import { LhCheckbox } from '@lh-ui/vue3'

export default {
  components: { LhCheckbox },
  data() {
    return {
      accepted: false
    }
  }
}
</script>

<template>
  <LhCheckbox v-model="accepted" label="읽었으며 동의합니다" />
</template>

그룹으로 사용

그룹으로 사용

VueReactSvelte

<script setup lang="ts">
import { ref } from 'vue'
import { LhCheckbox, LhCheckboxGroup } from '@lh-ui/vue3'

const selected = ref(['vue'])
</script>

<template>
  <LhCheckboxGroup v-model="selected" name="framework">
    <LhCheckbox value="vue" label="Vue" />
    <LhCheckbox value="react" label="React" />
    <LhCheckbox value="svelte" label="Svelte" />
  </LhCheckboxGroup>
</template>

<script>
import { LhCheckbox, LhCheckboxGroup } from '@lh-ui/vue3'

export default {
  components: { LhCheckbox, LhCheckboxGroup },
  data() {
    return {
      selected: ['vue']
    }
  }
}
</script>

<template>
  <LhCheckboxGroup v-model="selected" name="framework">
    <LhCheckbox value="vue" label="Vue" />
    <LhCheckbox value="react" label="React" />
    <LhCheckbox value="svelte" label="Svelte" />
  </LhCheckboxGroup>
</template>

커스텀 테마

체크박스에 커스텀 테마 색상을 적용합니다.

青花瓷(청화백자) 테마

옵션 1옵션 2

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhCheckbox, LhCheckboxGroup } from '@lh-ui/vue3'

const selected = ref(['option1'])
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhCheckboxGroup v-model="selected">
      <LhCheckbox value="option1" label="옵션 1" />
      <LhCheckbox value="option2" label="옵션 2" />
    </LhCheckboxGroup>
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhCheckbox, LhCheckboxGroup } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhCheckbox, LhCheckboxGroup },
  data() {
    return {
      selected: ['option1'],
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhCheckboxGroup v-model="selected">
      <LhCheckbox value="option1" label="옵션 1" />
      <LhCheckbox value="option2" label="옵션 2" />
    </LhCheckboxGroup>
  </LhConfigProvider>
</template>

테마에 대한 자세한 내용은 테마 커스터마이징을 참고하세요.

국제화

체크박스 글자는 LhConfigProvider와 언어 팩으로 국제화 전환을 구현할 수 있습니다.

국제화

Vue框架React框架

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhCheckbox, LhCheckboxGroup } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const selected = ref(['vue'])
</script>

<template>
  <!-- 언어 팩 설정 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhCheckboxGroup v-model="selected">
      <LhCheckbox value="vue" :label="locale === 'zh-CN' ? 'Vue框架' : 'Vue Framework'" />
      <LhCheckbox value="react" :label="locale === 'zh-CN' ? 'React框架' : 'React Framework'" />
    </LhCheckboxGroup>
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhCheckbox, LhCheckboxGroup } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhCheckbox, LhCheckboxGroup },
  data() {
    return {
      locale: 'zh-CN',
      selected: ['vue'],
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- 언어 팩 설정 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhCheckboxGroup v-model="selected">
      <LhCheckbox value="vue" :label="locale === 'zh-CN' ? 'Vue框架' : 'Vue Framework'" />
      <LhCheckbox value="react" :label="locale === 'zh-CN' ? 'React框架' : 'React Framework'" />
    </LhCheckboxGroup>
  </LhConfigProvider>
</template>

비활성화, 중간 상태, 크기

독립 체크박스는 disabled로 비활성화하고, indeterminate로 중간 상태를 표시하고, size로 크기를 조정합니다. 그룹은 disabled로 그룹 전체를 비활성화하고, size로 그룹 내 크기를 통일합니다.

비활성화, 중간 상태, 크기

비활성화 상태중간 상태smalllarge

옵션 A옵션 B

옵션 A옵션 B

<script setup lang="ts">
import { ref } from 'vue'

const demoCbDisabled = ref(true)
const demoCbIndeterminate = ref(false)
const demoIndeterminate = ref(true)
const demoCbSmall = ref(false)
const demoCbLarge = ref(false)
const demoCbGroupDisabled = ref<string[]>([])
const demoCbGroupSize = ref<string[]>([])
</script>

<template>
  <!-- 비활성화 -->
  <LhCheckbox v-model="demoCbDisabled" disabled label="비활성화 상태" />
  <!-- 중간 상태 -->
  <LhCheckbox v-model="demoCbIndeterminate" :indeterminate="demoIndeterminate" label="중간 상태" />
  <!-- 작은 크기 -->
  <LhCheckbox v-model="demoCbSmall" size="small" label="small" />
  <!-- 큰 크기 -->
  <LhCheckbox v-model="demoCbLarge" size="large" label="large" />
  <!-- 그룹 전체 비활성화 -->
  <LhCheckboxGroup v-model="demoCbGroupDisabled" disabled>
    <LhCheckbox value="a" label="옵션 A" />
    <LhCheckbox value="b" label="옵션 B" />
  </LhCheckboxGroup>
  <!-- 그룹 내 통일 큰 크기 -->
  <LhCheckboxGroup v-model="demoCbGroupSize" size="large">
    <LhCheckbox value="a" label="옵션 A" />
    <LhCheckbox value="b" label="옵션 B" />
  </LhCheckboxGroup>
</template>

<script>
export default {
  data() {
    return {
      demoCbDisabled: true,
      demoCbIndeterminate: false,
      demoIndeterminate: true,
      demoCbSmall: false,
      demoCbLarge: false,
      demoCbGroupDisabled: [],
      demoCbGroupSize: [],
    }
  },
}
</script>

<template>
  <!-- 비활성화 -->
  <LhCheckbox v-model="demoCbDisabled" disabled label="비활성화 상태" />
  <!-- 중간 상태 -->
  <LhCheckbox v-model="demoCbIndeterminate" :indeterminate="demoIndeterminate" label="중간 상태" />
  <!-- 작은 크기 -->
  <LhCheckbox v-model="demoCbSmall" size="small" label="small" />
  <!-- 큰 크기 -->
  <LhCheckbox v-model="demoCbLarge" size="large" label="large" />
  <!-- 그룹 전체 비활성화 -->
  <LhCheckboxGroup v-model="demoCbGroupDisabled" disabled>
    <LhCheckbox value="a" label="옵션 A" />
    <LhCheckbox value="b" label="옵션 B" />
  </LhCheckboxGroup>
  <!-- 그룹 내 통일 큰 크기 -->
  <LhCheckboxGroup v-model="demoCbGroupSize" size="large">
    <LhCheckbox value="a" label="옵션 A" />
    <LhCheckbox value="b" label="옵션 B" />
  </LhCheckboxGroup>
</template>

Checkbox API

LhCheckbox Props

속성	설명	타입	기본값
modelValue	독립 모드의 선택 상태	boolean	false
value	그룹 모드에서 제출되는 값	unknown	—
label	라벨 텍스트	string	—
disabled	비활성화 여부	boolean	false
indeterminate	중간 상태 여부	boolean	false
name	—	string	—
size	크기	"small" | "medium" | "large"	'medium'
sx	sx 빠른 레이아웃 속성	LhSxProps	—

LhCheckboxGroup Props

속성	설명	타입	기본값
model-value	독립 모드의 선택 상태	unknown[]	[]
disabled	그룹 전체 비활성화 여부	boolean	false
name	네이티브 폼 이름	string	—
size	그룹 내 체크박스 크기	'small' | 'medium' | 'large'	'medium'

Events

이벤트	설명	매개변수
update:modelValue	값이 변경됨	value: boolean 또는 value[]
change	선택이 변경됨	value

Slots

슬롯	설명
default	커스텀 내용

타입 정의

이 컴포넌트가 외부로 내보내는 TypeScript 타입 구조는 다음과 같습니다(packages/components/checkbox/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 속성 설명은 위쪽 Props 표를 참고하세요).

LhCheckboxSize

export type LhCheckboxSize = 'small' | 'medium' | 'large'

LhCheckboxProps

export interface LhCheckboxProps {
  modelValue?: boolean
  value?: unknown
  label?: string
  disabled?: boolean
  indeterminate?: boolean
  name?: string
  size?: LhCheckboxSize
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhCheckboxGroupProps

export interface LhCheckboxGroupProps {
  modelValue?: unknown[]
  disabled?: boolean
  name?: string
  size?: LhCheckboxSize
}