pages._explore-components-interaction-toggle.title

pages._explore.sections.basic-usage.title

html

<Toggle
    v-model="rfToggleValue"
/>

typescript

<script setup lang="ts">

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

pages._explore.sections.complex-usage.title

html

<Toggle
    id="advanced-toggle"
    v-model="rfAdvancedToggleValue"
    :field-state="FormFieldState.SUCCESS"
    :on-icon="true"
    :off-icon="true"
/>

typescript

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

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

Icon Options

Default icons (checkmark/cross)

Custom icons (eye/eye-closed)

No icons

html

<!-- Toggle with default icons -->
<Toggle 
    v-model="rfDefaultIconsValue" 
    :on-icon="true"
    :off-icon="true"
/>

<!-- Toggle with custom icons -->
<Toggle 
    v-model="rfCustomIconsValue" 
    :on-icon-name="'solar:eye-bold'"
    :off-icon-name="'solar:eye-closed-bold'"
/>

<!-- Toggle without icons -->
<Toggle 
    v-model="rfNoIconsValue"
/>

typescript

<script setup lang="ts">

// state
const rfDefaultIconsValue = ref(true)
const rfCustomIconsValue = ref(false)
const rfNoIconsValue = ref(true)
</script>

Field States

html

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

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

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

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

<!-- Disabled state -->
<Toggle 
    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
onIcon	undefined	boolean
offIcon	undefined	boolean
onIconName	undefined	string
offIconName	undefined	string

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