Select Button
Basic usage
<script setup lang="ts">
import {
NmorphSelectButton,
NmorphSelectButtonItem,
} from "@nmorph/nmorph-ui-kit";
const value = ref("on");
const options = [
{ value: "off", label: "Off" },
{ value: "on", label: "On" },
];
</script><template>
<div class="select-button-basic-overview">
<NmorphSelectButton v-model="value" :options="options" />
<NmorphSelectButton v-model="value">
<NmorphSelectButtonItem value="off">Off</NmorphSelectButtonItem>
<NmorphSelectButtonItem value="on">On</NmorphSelectButtonItem>
</NmorphSelectButton>
</div>
</template>Thickness
Sets the thickness of the component.
<script setup lang="ts">
import {
NmorphSelectButton,
NmorphSelectButtonItem,
NmorphComponentThickness,
} from "@nmorph/nmorph-ui-kit";
const value = ref("on");
const thicknesses = Object.keys(NmorphComponentThickness) as Array<
keyof typeof NmorphComponentThickness
>;
</script><template>
<div class="select-button-thickness-overview">
<NmorphSelectButton
v-for="thickness in thicknesses"
:key="thickness"
v-model="value"
:thickness="thickness"
>
<NmorphSelectButtonItem value="off">Off</NmorphSelectButtonItem>
<NmorphSelectButtonItem value="on">On</NmorphSelectButtonItem>
</NmorphSelectButton>
<NmorphSelectButton v-model="value" custom-thickness="44px">
<NmorphSelectButtonItem value="off">Off</NmorphSelectButtonItem>
<NmorphSelectButtonItem value="on">Custom</NmorphSelectButtonItem>
</NmorphSelectButton>
</div>
</template>Disabled
Disables the component.
<script setup lang="ts">
import {
NmorphSelectButton,
NmorphSelectButtonItem,
} from "@nmorph/nmorph-ui-kit";
const value = ref("on");
</script><template>
<div class="select-button-disabled-overview">
<NmorphSelectButton v-model="value" disabled>
<NmorphSelectButtonItem value="off">Off</NmorphSelectButtonItem>
<NmorphSelectButtonItem value="on">On</NmorphSelectButtonItem>
</NmorphSelectButton>
</div>
</template>Fill
Makes the component occupy the full width of its container.
<script setup lang="ts">
import {
NmorphSelectButton,
NmorphSelectButtonItem,
} from "@nmorph/nmorph-ui-kit";
const value = ref("on");
</script><template>
<div class="select-button-fill-overview">
<NmorphSelectButton v-model="value" fill>
<NmorphSelectButtonItem value="off">Off</NmorphSelectButtonItem>
<NmorphSelectButtonItem value="on">On</NmorphSelectButtonItem>
<NmorphSelectButtonItem value="auto">Auto</NmorphSelectButtonItem>
</NmorphSelectButton>
</div>
</template>