Add an image check to your form and give users visually attractive options to choose from.
<div class="mb-3">
<label class="form-label">Image Check</label>
<div class="row g-2">
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="..." alt="Beautiful blonde woman relaxing with a can of coke on a tree stump by the beach" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input" checked/>
<span class="form-imagecheck-figure">
<img src="..." alt="Brainstorming session with creative designers" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="..." alt="Finances - US Dollars and Bitcoins - Currency - Money" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input" checked/>
<span class="form-imagecheck-figure">
<img src="..." alt="Group of people brainstorming and taking notes" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="..." alt="Blue sofa with pillows in a designer living room interior" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="..." alt="Home office desk with Macbook, iPhone, calendar, watch & organizer" class="form-imagecheck-image">
</span>
</label>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Image Check Radio</label>
<div class="row g-2">
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck-radio" type="radio" value="1" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="..." alt="Group of people sightseeing in the city" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck-radio" type="radio" value="2" class="form-imagecheck-input" checked/>
<span class="form-imagecheck-figure">
<img src="..." alt="Color Palette Guide. Sample Colors Catalog." class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck-radio" type="radio" value="3" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="..." alt="Stylish workplace with computer at home" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck-radio" type="radio" value="4" class="form-imagecheck-input" checked/>
<span class="form-imagecheck-figure">
<img src="..." alt="Pink desk in the home office" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck-radio" type="radio" value="5" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="..." alt="Young woman sitting on the sofa and working on her laptop" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck-radio" type="radio" value="6" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="..." alt="Coffee on a table with other items" class="form-imagecheck-image">
</span>
</label>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Person Check</label>
<div class="row g-2">
<div class="col-auto">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<span class="form-imagecheck-image">
<span class="avatar avatar-md" style="background-image: url(...)"></span>
</span>
</span>
</label>
</div>
<div class="col-auto">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input" checked/>
<span class="form-imagecheck-figure">
<span class="form-imagecheck-image">
<span class="avatar avatar-md">HS</span>
</span>
</span>
</label>
</div>
<div class="col-auto">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<span class="form-imagecheck-image">
<span class="avatar avatar-md" style="background-image: url(...)"></span>
</span>
</span>
</label>
</div>
<div class="col-auto">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input" checked/>
<span class="form-imagecheck-figure">
<span class="form-imagecheck-image">
<span class="avatar avatar-md" style="background-image: url(...)"></span>
</span>
</span>
</label>
</div>
<div class="col-auto">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<span class="form-imagecheck-image">
<span class="avatar avatar-md" style="background-image: url(...)"></span>
</span>
</span>
</label>
</div>
<div class="col-auto">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<span class="form-imagecheck-image">
<span class="avatar avatar-md">SA</span>
</span>
</span>
</label>
</div>
<div class="col-auto">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="7" class="form-imagecheck-input" checked/>
<span class="form-imagecheck-figure">
<span class="form-imagecheck-image">
<span class="avatar avatar-md" style="background-image: url(...)"></span>
</span>
</span>
</label>
</div>
<div class="col-auto">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="8" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<span class="form-imagecheck-image">
<span class="avatar avatar-md" style="background-image: url(...)"></span>
</span>
</span>
</label>
</div>
<div class="col-auto">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="9" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<span class="form-imagecheck-image">
<span class="avatar avatar-md" style="background-image: url(...)"></span>
</span>
</span>
</label>
</div>
</div>
</div>