pages._explore-components-interaction-checkbox.title

pages._explore.sections.basic-usage.title

html

<Checkbox
    v-model="rfCheckboxValue"
/>

typescript

<script setup lang="ts">

// state
const rfCheckboxValue = ref(false)
</script>

pages._explore.sections.complex-usage.title

html

<Checkbox
    id="example-checkbox"
    v-model="rfCheckboxValue"
    :field-state="FormFieldState.SUCCESS"
/>

typescript

<script setup lang="ts">
import { FormFieldState } from '#core-types/components/interaction/form'

// state
const rfCheckboxValue = ref(true)
</script>

pages._explore.sections.states.title

html

<!-- Default state -->
<Checkbox v-model="rfDefaultValue" />

<!-- Warning state -->
<Checkbox 
    v-model="rfWarningValue" 
    :field-state="FormFieldState.WARNING" 
/>

<!-- Error state -->
<Checkbox 
    v-model="rfErrorValue" 
    :field-state="FormFieldState.ERROR" 
/>

<!-- Success state -->
<Checkbox 
    v-model="rfSuccessValue" 
    :field-state="FormFieldState.SUCCESS" 
/>

<!-- Disabled state -->
<Checkbox 
    v-model="rfDisabledValue" 
    :field-state="FormFieldState.DISABLED" 
/>

typescript

<script setup lang="ts">
import { FormFieldState } from '#core-types/components/interaction/form'

// state
const rfDefaultValue = ref(false)
const rfWarningValue = ref(true)
const rfErrorValue = ref(false)
const rfSuccessValue = ref(true)
const rfDisabledValue = ref(true)
</script>

pages._explore.sections.props.title

Prop	Default	Type
id	undefined	string
fieldState	undefined	FormFieldState
modelValue	undefined	boolean \| undefined

pages._explore.sections.types.title

Name	Type	Options
FormFieldState	enum	DISABLED \| WARNING \| ERROR \| SUCCESS

pages._explore.sections.emits.title

Event	Type
update:modelValue	boolean \| undefined