How do I give radio-buttons in a form a custom look?

Question

Code:

<label class="form__label" for="urgency">Urgency</label>

            <input class="form__input no-input-animation" id="urgency" name="urgency" type="radio" required>
                <div class="urgency-text critical">Critical</div>
                <div class="urgency-text high">High</div>
                <div class="urgency-text medium">Medium</div>
                <div class="urgency-text low">Low</div>

This shows one radio button with each urgency div as one option collectively. I can understand why.

I would like my buttons to have no radio checkbox and each of the divs be its own option, with a value attribute.

EXAMPLE:

Choose Status:

[ Available ] [ Idle ] [ Do Not Disturb ]

Each item in square brackets [] is clickable and has it's own value attribute, e.g. available

How do I make this work inside a form?

Thanks.

" I would like my buttons to have no radio checkbox and each of the divs be its own option, with a value attribute. " Please explain this line, this is little bit confusing for me. — Prabesh Gouli, Aug 04 '20 at 15:56
You want the options ('critical', 'high', 'medium' and 'low) to appear as mutually-exclusive buttons? (In which case you may be duplicating this question: https://stackoverflow.com/questions/5523735/how-to-make-a-radio-button-look-like-a-toggle-button) — David Thomas, Aug 04 '20 at 16:04
what if you use `button` rather than `div`, `button` has its own value attribute and handle state too. Sorry again but I am still confused about what you actually need. — Prabesh Gouli, Aug 04 '20 at 16:06

score 0 · Answer 1 · answered Aug 04 '20 at 16:19

I will suggest you to refer to this as an example. I believe this is exactly what you're looking for.

<div class="container">

  <div class="segmented-control" style="width: 100%; color: #5FBAAC">
    <input type="radio" name="sc-1-1" id="sc-1-1-1">
    <input type="radio" name="sc-1-1" id="sc-1-1-2">
    <input type="radio" name="sc-1-1" id="sc-1-1-3" checked>

    <label for="sc-1-1-1" data-value="High">High</label>
    <label for="sc-1-1-2" data-value="Medium">Medium</label>
    <label for="sc-1-1-3" data-value="Low">Low</label>
  </div>

CodePen Example <-- Is what youre looking for.

Visit this blog for more information.

How do I give radio-buttons in a form a custom look?

1 Answers1