LegnoRadioButton

Examples

Example 1 - Default

Please select fruit

Apple

Orange

Banana

<legno-radio-button name="fruits" :items="fruit" />

fruit = [
  { id: 'id1', value: 1, text: 'Apple' },
  { id: 'id2', value: 2, text: 'Orange' },
  { id: 'id3', value: 3, text: 'Banana' }
]

<div class="legno-radio-button">
    <label class="legno-radio-button--group-title">Please select fruit</label>
    <div class="legno-radio-button__item">
        <input id="id1" name="fruits" type="radio" value="1"> 
        <label for="id1">Apple</label>
    </div>
    <div class="legno-radio-button__item">
        <input id="id2" name="fruits" type="radio" value="2"> 
        <label for="id2">Orange</label>
    </div>
    <div class="legno-radio-button__item">
        <input id="id3" name="fruits" type="radio" value="3"> 
        <label for="id3">Banana</label>
    </div>
</div>

Example 2 - Disabled

Apple

Orange

Banana

<legno-radio-button name="fruits" :items="fruit" />

fruit = [
  { id: 'id2-1', value: 1, text: 'Apple', disabled: true },
  { id: 'id2-2', value: 2, text: 'Orange', disabled: true },
  { id: 'id2-3', value: 3, text: 'Banana', disabled: true }
]

<div class="legno-radio-button">
    <div class="legno-radio-button__item">
        <input id="id2-1" name="fruits" type="radio" value="1" disabled> 
        <label for="id2-1">Apple</label>
    </div><div class="legno-radio-button__item">
        <input id="id2-2" name="fruits" type="radio" value="2" disabled> 
        <label for="id2-2">Orange</label></div>
    <div class="legno-radio-button__item">
        <input id="id2-3" name="fruits" type="radio" value="3" disabled> 
        <label for="id2-3">Banana</label>
    </div>
</div>

Example 3 - Validation error

Apple

Orange

Banana

Du må gjøre et valg!

<legno-radio-button name="fruits" :items="fruit" />

fruit = [
  { id: 'id3-1', value: 1, text: 'Apple' },
  { id: 'id3-2', value: 2, text: 'Orange' },
  { id: 'id3-3', value: 3, text: 'Banana' }
]

WARNING

When using plain HTML you need to toggle these css classes manually on the root element:

• legno-radio-button--invalid shows invalid state

<div class="legno-radio-button legno-radio-button--invalid">
    <div class="legno-radio-button__item">
        <input id="id3-1" name="fruits" type="radio" value="1"> 
        <label for="id3-1">Apple</label>
    </div>
    <div class="legno-radio-button__item">
        <input id="id3-2" name="fruits" type="radio" value="2"> 
        <label for="id3-2">Orange</label>
    </div>
    <div class="legno-radio-button__item">
        <input id="id3-3" name="fruits" type="radio" value="3"> 
        <label for="id3-3">Banana</label>
    </div>
    <div class="legno-radio-button__error-message">
        Du må gjøre et valg!
    </div>
</div>

Example 4 - Vertical

Apple

Orange

Banana

<legno-radio-button name="fruits" :items="fruit" />

fruit = [
  { id: 'id4-1', value: 1, text: 'Apple' },
  { id: 'id4-2', value: 2, text: 'Orange' },
  { id: 'id4-3', value: 3, text: 'Banana' }
]

<div class="legno-radio-button legno-radio-button--vertical">
    <div class="legno-radio-button__item">
        <input id="id4-1" name="fruits" type="radio" value="1"> 
        <label for="id4-1">Apple</label>
    </div>
    <div class="legno-radio-button__item">
        <input id="id4-2" name="fruits" type="radio" value="2"> 
        <label for="id4-2">Orange</label>
    </div>
    <div class="legno-radio-button__item">
        <input id="id4-3" name="fruits" type="radio" value="3"> 
        <label for="id4-3">Banana</label>
    </div>
</div>

Example 5 - With description

Apple

An apple a day...

Orange

One orange Two oranges

Banana

Banana

Banana

<legno-radio-button name="fruits" :items="fruit" />

fruit = [
  { id: 'id5-1', value: 1, text: 'Apple', description: 'An apple a day...' },
  { id: 'id5-2', value: 2, text: 'Orange', description: 'One orange\nTwo oranges' },
  { id: 'id5-3', value: 3, text: 'Banana', description: 'Banana <h3>Banana</h3>' }
]

<div class="legno-radio-button__items-wrapper">
   <div class="legno-radio-button__item">
      <input type="radio" id="id5-1" name="fruits" value="1"> 
      <label for="id5-1">Apple</label> 
      <div class="legno-radio-button__description">An apple a day.../div>
   </div>
    <div class="legno-radio-button__item">
      <input type="radio" id="id5-2" name="fruits" value="2"> 
      <label for="id5-2">Orange</label> 
      <div class="legno-radio-button__description">One orange Two oranges</div>
   </div>
   <div class="legno-radio-button__item">
      <input type="radio" id="id5-3" name="fruits" value="3"> 
      <label for="id5-3">Banana</label> 
      <div class="legno-radio-button__description">Banana <h3>Banana</h3></div>
  </div>
</div>

Slots

...

Props

...