Designsystem - Radioknapper

Navn	Type	Verdi
label	string
description	string
data-size	sm, md, lg
required	boolean
readonly	boolean
vertical-align	boolean
error message	string

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`
readonly	boolean	false	`<input>` sine `readonly`
disabled	boolean	false	`<input>` sine `disabled`
values	array:string	`radio-labels`	`<input>` sine `values=`
group-class	string	""	`<legend>` sin `class=`
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=`
description	Plasseres under label inni `<p>`.
~~help-text~~	Avvilket 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

Help text er ikke støttet lengre...

<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"
    readonly
>
    <div slot='help-text'>
        <p>Help text er ikke støttet lengre...</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>