Designsystem - Radioknapper

Struktur

<lk-radio-group>
  <fieldset>

    (div)

      <legend/>

      (lk-help-text)
        (slot name="help-text" /)
      (/lk-help-text)
    (/div)

    <slot/>

    [
      <label>
        <input/>
        <span/>
      </label>
    ]

    <p/>

  </fieldset>
</lk-radio-group>

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt	Tillatte verdier	Default	Beskrivelse
guid* guid-list	string array:string	"" `guid+radio-labels`	Prefiks for `<input>` sine `id=`. Evt. `<input>` sine `id=`
group-name	string	""	`<input>` sine `name=`
group-label	string	""	Tekst til `<leged>`
radio-labels	array:string	""	Tekster til `<input>`'s
error-message	string	""
required	boolean	false	`<input>` sine `required=`
disabled	boolean	false	`<input>` sine `disabled=`
values	array:string	`radio-labels`	`<input>` sine `values=`
group-class	string	""	`<legend>` sin `class=`
vertical-align	boolean	true
checked-item	value:string	""
dependant-ids dependant-guids dependant-classes	array:string	""
dependant-element	HTMLElement	""
dependant-id dependant-guid dependant-class	string	""
show-dependant-if-value hide-dependant-if-value	string	""
show-dependant-if-blank hide-dependant-if-blank	boolean	false

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot=	Beskrivelse
*	Elementer uten `slot=` attributter blir plassert øverst inni `<fieldset>`. Kan brukes istede for `group-label=`
help-text	Plasseres rett etter `<legend>` i en `<div>` wrapper

Metoder

Merk at alle metoder er asynkrone. Ref. Stenciljs.com

Metode	Parameter	Retur	Beskrivelse
validate	()	valid:boolean
getChecked	(attr: string = "value")	attrValue:string
uncheck	()	null
adjustDependants	()		Viser/skjuler det som komponenten skal styre

Dependant Examples

For bruk og eksempler av dependant attributer se dependant atrribut siden

Eksempler

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.

Kort beskrivelse...

<lk-radio-group
    guid="radio-input-default"
    group-name='radioGroupDefault'
    group-label='Radio knapper'
    radio-labels='["Valg 1","Valg 2","Valg 3"]'
></lk-radio-group>

<lk-radio-group
    id="radio-input-invalid"
    guid="radio-input-invalid"
    group-name='radioGroupInvalid'
    group-label='Radio knapper som er invalid'
    radio-labels='["Feil verdi","Noe er feil","Å nei"]'
    error-message='Du må velge en verdi'
    required
></lk-radio-group>

<lk-radio-group
    guid="radio-input-disabled"
    group-name='radioGroupDisabled'
    group-label='Radio knapper som er inactive'
    radio-labels='["Ikke bruk","Skruv av","Inactiv"]'
    checked-item="Ikke bruk"
    disabled
>
    <div slot='help-text'>
        <p>Kort beskrivelse...</p> 
    </div>
</lk-radio-group>

Legacy radio knapper

Label
Valg
Barn jeg har foreldreansvar for
Barn jeg ikke har foreldreansvar for

Du må oppgi hvem du skal søke for.

<div class="margin-bottom--large">
    <h3 class="section-title">Legacy radio knapper</h3>

    <span class="title-required-sign">Label</span><br>
    <label class="radio">
        <input type="radio" value="Personal" name="applicantType">
        <span class="radio__label">Valg</span>
    </label><br>
    <label class="radio">
        <input type="radio" value="OnBehalfOfChild" name="applicantType">
        <span class="radio__label">Barn jeg har foreldreansvar for</span>
    </label><br>
    <label class="radio">
        <input type="radio" value="OnBehalfOfOtherChild" name="applicantType">
        <span class="radio__label">Barn jeg ikke har foreldreansvar for</span>
    </label>

    <p id="applicant-type-error" class="input-block__error-message">
        Du må oppgi hvem du skal søke for.
    </p>
</div>