Skirt length on a dress form
A dress form with a flared skirt: each option sits at the height of its hem and the skirt grows or shrinks to it.
Settings
Code
<fieldset class="uvq04-hem"><legend>Skirt length</legend><div class="st"><div class="fm" aria-hidden="true"><i class="nk"></i><i class="pl"></i><i class="bs"></i><i class="ts"></i><i class="sk"></i><i class="hm"></i></div><div class="op"><label style="--h:2.2em"><input type="radio" name="uvq04-hem"><span>Mini</span></label><label style="--h:3.8em"><input type="radio" name="uvq04-hem"><span>Knee</span></label><label style="--h:5.4em"><input type="radio" name="uvq04-hem" checked><span>Midi</span></label><label style="--h:7em"><input type="radio" name="uvq04-hem"><span>Maxi</span></label></div></div></fieldset>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Radio buttons
See all Radio buttonsWhere to use it
A linen dress form on a wooden stand wears an A-line skirt, and the four length options, mini, knee, midi and maxi, are placed right at the height of their hem with dotted leader lines. Choosing one makes the skirt grow or shorten with a small sway, while a chalk line with two pins follows the hem. Good for fashion configurators, made-to-measure shops and sewing classes.
The main color is the skirt fabric and the secondary color the linen of the form. Lengths are plain em values in each label's style, so adjust them to your own garment and keep the option names short.