Checkbox
Model-value
Represents the checkbox state (checked or not).
<script setup lang="ts">
import { NmorphCheckbox } from "@nmorph/nmorph-ui-kit";
const value = ref(true);
</script><template>
<div class="checkbox-model-value-overview">
<NmorphCheckbox id="1" v-model="value" label="Label" />
</div>
</template>Design
Defines the visual style of the checkbox.
<script setup lang="ts">
import { NmorphCheckbox } from "@nmorph/nmorph-ui-kit";
const value = ref(false);
</script><template>
<div class="checkbox-design-overview">
<NmorphCheckbox v-model="value" id="1" design="plain" />
<NmorphCheckbox v-model="value" id="2" design="nmorph" :label="String(value)" />
</div>
</template>Disabled
Disables the checkbox if set to true.
<script setup lang="ts">
import { NmorphCheckbox } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="checkbox-disabled-overview">
<NmorphCheckbox disabled :model-value="true" />
</div>
</template>