Default
Standard stat field with label and dice button. Values come from dice rolls only.
<v-stat-field v-model="strength" die="3d6" label="Strength" />
With Validation
Enforce min/max ranges. Invalid rolls show error messages.
<v-stat-field die="3d6" :min="3" :max="18" />
Show Roll Details
Display individual die results and modifiers below the input.
<v-stat-field die="3d6" show-details />
d4 - Tetrahedron 🔺
Four-sided die for small damage rolls.
<v-stat-field die="1d4" />
d6 - Cube ⚄
Six-sided die, most common in RPGs.
<v-stat-field die="2d6" />
d8 - Octahedron 🔷
Eight-sided die for medium damage.
<v-stat-field die="1d8" />
d10 - Decahedron 🔟
Ten-sided die for percentile systems.
<v-stat-field die="1d10" />
d12 - Dodecahedron 🌟
Twelve-sided die for high damage.
<v-stat-field die="1d12" />
d20 - Icosahedron 🎲
Twenty-sided die for skill checks.
<v-stat-field die="1d20" />
d100 - Percentile 💯
Hundred-sided for percentile rolls.
<v-stat-field die="1d100" />
Positive Modifier
Add a bonus to the roll result.
<v-stat-field die="1d8+3" show-details />
Negative Modifier
Subtract a penalty from the result.
<v-stat-field die="2d6-1" show-details />
Multiple Dice + Modifier
Roll multiple dice with significant bonus.
<v-stat-field die="4d6+5" show-details />
Default Variant
Standard spacing and sizing.
<v-stat-field variant="default" />
Compact Variant
Smaller padding and font sizes for tight spaces.
<v-stat-field variant="compact" />
Inline Variant
Horizontal layout for embedding in text.
<v-stat-field variant="inline" />
Required Field
Mark field as required with asterisk indicator.
<v-stat-field required />
With Hint Text
Add helper text below the input field.
<v-stat-field hint="Roll for starting HP" />
Auto-roll on Mount
Automatically roll when component mounts.
<v-stat-field auto-roll />
Disabled State
Prevent interaction with the field.
<v-stat-field disabled />
Value:
v-model - Bind to the stat value (Number | null)
Dice Configuration:
die - Dice notation (required, e.g., "3d6", "1d20+5")
Input Configuration:
label - Label text above input
placeholder - Placeholder text
hint - Helper text below input
hide-roll-button - Hide the dice button
Validation:
min - Minimum allowed value
max - Maximum allowed value
required - Mark as required (shows *)
rules - Array of validation functions
Display:
show-details - Show roll breakdown
Styling:
variant - "default", "compact", or "inline"
State:
disabled - Disable the field
loading - Show loading state
Behavior:
auto-roll - Auto-roll on mount
seed - Seed for deterministic rolls
@update:modelValue - Value changed
@roll - Dice were rolled (returns RollResult)
@input - Value changed (Vuetify-style)
@change - Value changed after roll completes
@focus - Input gained focus
@blur - Input lost focus
@click - Input was clicked
@click:append - Roll button was clicked
@error - Roll error occurred
@validation-error - Validation failed