Number Input
Basic usage
<script setup lang="ts">
import { NmorphNumberInput } from "@nmorph/nmorph-ui-kit";
const value = ref(3);
</script><template>
<div class="number-input-basic-usage-overview">
<NmorphNumberInput
v-model="value"
:max="5"
:min="1"
:step="1"
thickness="thin"
/>
</div>
</template>Thickness
Defines the thickness of the number input field.
<script setup lang="ts">
import { NmorphNumberInput } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="number-input-thickness-overview">
<NmorphNumberInput thickness="thick" />
<NmorphNumberInput thickness="basic" />
<NmorphNumberInput thickness="thin" />
</div>
</template>Disabled
Disables the number input field if set to true.
<script setup lang="ts">
import { NmorphNumberInput } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="number-input-disabled-overview">
<NmorphNumberInput disabled />
</div>
</template>Action-btn-position-right
If set to true, the increment and decrement buttons are placed on the right.
<script setup lang="ts">
import { NmorphNumberInput } from "@nmorph/nmorph-ui-kit";
const value = ref(2);
</script><template>
<div class="number-input-action-btn-position-right-overview">
<NmorphNumberInput
action-btn-position-right
v-model="value"
thickness="thick"
/>
</div>
</template>