RadioItem

Radioknapp for å velge ett element blant flere alternativer.

FigmaGitHubEndringslogg

Test props

disabled

Eksempler

Gruppe av radioknapper

Bruk RadioGroup for å gruppere RadioItem.

<RadioGroup label="Hvilke energitiltak har du gjort?">
  <RadioItem label="Solcellepanel" name="tiltak" value="sol" />
  <RadioItem label="Isolasjon" name="tiltak" value="isolasjon" />
  <RadioItem label="LED-pærer" name="tiltak" value="LED" />
</RadioGroup>

Radioknapp i ulike størrelser

Bruk small, medium eller large.

<RadioGroup label="Hvilke energitiltak har du gjort?" size="small">
  <RadioItem label="Solcellepanel" name="tiltaksmall" size="small" />
  <RadioItem label="Isolasjon" name="tiltaksmall" size="small" />
  <RadioItem label="LED-pærer" name="tiltaksmall" size="small" />
</RadioGroup>

<RadioGroup label="Hvilke energitiltak har du gjort?" size="medium">
  <RadioItem label="Solcellepanel" name="tiltakmedium" size="medium" />
  <RadioItem label="Isolasjon" name="tiltakmedium" size="medium" />
  <RadioItem label="LED-pærer" name="tiltakmedium" size="medium" />
</RadioGroup>

<RadioGroup label="Hvilke energitiltak har du gjort?" size="large">
  <RadioItem label="Solcellepanel" name="tiltaklarge" size="large" />
  <RadioItem label="Isolasjon" name="tiltaklarge" size="large" />
  <RadioItem label="LED-pærer" name="tiltaklarge" size="large" />
</RadioGroup>

Kontrollert eksempel

function ControlledExample() {
  const [selectedOption, setSelectedOption] = React.useState("");

  const handleRadioChange = (event) => {
    setSelectedOption(event.target.value);
  }

  return (
    <form>
      <RadioGroup label="Hvilke energitiltak har du gjort?">
        <RadioItem
          label="Solcellepaneler"
          name="energitiltak"
          checked={selectedOption === 'solpaneler'}
          onChange={handleRadioChange}
          value="solpaneler"
        />
        <RadioItem
          label="Sparelamper"
          name="energitiltak"
          checked={selectedOption === 'sparelamper'}
          onChange={handleRadioChange}
          value="sparelamper"
        />
      </RadioGroup>
    </form>
  );
}

Retningslinjer

Alle radioknapper må ha en label. For å knytte dem sammen, bruke prop name.

Bruk en RadioGroup for å gruppere RadioItems. Bruk label på RadioGroup for å gi et passende navn for gruppen.

Kode

<RadioItem />

import { RadioItem } from "@aneo-org/design-react/clientComponents";

RadioItem.

PropTypeBeskrivelse
valuestring
className?stringEgen styling.
labelReact.ReactNode
namestringNavn for radio-gruppen.
onChange?() => void
size?"small" | "medium" | "large"medium er standard.

<RadioGroup />

import { RadioGroup } from "@aneo-org/design-react/clientComponents";

Gruppering av radio items.

PropTypeBeskrivelse
flexDirection"row" | "row-reverse" | "column" | "column-reverse"Retning radioknapper skal plasseres.
labelstring
size?"small" | "medium" | "large"medium er standard.
className?stringEgen styling.
defaultValuestring