How to select a grid with arrow keys

so I am trying to make a character selection screen for a game and it has 8 boxes. I get how I can click on the individual boxes to select the character from the boxes, but how should I go about allowing players to select the box with arrow keys?

HTML

<div class="grid">
    <option value = "1" class="cell" id = samurai></option>
    <option value = "2" class="cell" id = warrior></option>
    <option value = "3" class="cell" id = wizard ></option>
    <option value = "4" class="cell" id = knight></option>
    <option value = "5" class="cell" id = ninja></option>
    <option value = "6" class="cell" id = king></option>
    <option value = "7" class="cell" id = mage></option>
    <option value = "8" class="cell" id = monk></option>
</div>

CSS

.grid {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-wrap: wrap;
width: 500px;
height: 100px;
}

.cell {
height: 100px;
width: 100px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
border: 4px solid white;
border-radius: 10px;
}

character screen