Innloggingsside

Et klassisk innloggingsskjema bygget med Kilden-komponenter. Eksempelet viser hvordan Card, FormField, Input, Label, Checkbox og Button fungerer sammen.

Komplett eksempel

<div className="flex min-h-[500px] items-center justify-center bg-page p-4">
<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Logg inn</CardTitle>
    <CardDescription>
      Skriv inn e-post og passord for å logge inn på kontoen din.
    </CardDescription>
  </CardHeader>
  <CardContent className="flex flex-col gap-4">
    <FormField>
      <Label htmlFor="email">E-post</Label>
      <Input id="email" type="email" placeholder="navn@bekk.no" />
    </FormField>
    <FormField>
      <Label htmlFor="password">Passord</Label>
      <Input id="password" type="password" placeholder="••••••••" />
    </FormField>
    <div className="flex items-center gap-2">
      <Checkbox id="remember" />
      <Label htmlFor="remember" className="text-sm font-normal">
        Husk meg
      </Label>
    </div>
  </CardContent>
  <CardFooter className="flex flex-col gap-3">
    <Button className="w-full">Logg inn</Button>
    <p className="text-center text-sm text-muted">
      Har du ikke konto?{" "}
      <a href="#" className="underline underline-offset-4 hover:opacity-80">
        Registrer deg
      </a>
    </p>
  </CardFooter>
</Card>
</div>

Komponenter som brukes

Komponent	Rolle
`Card`	Ramme rundt skjemaet med header, innhold og footer
`FormField`	Grupperer label og input med riktig spacing
`Label`	Tilgjengelig ledetekst koblet til input via `htmlFor`
`Input`	Tekstfelt for e-post og passord
`Checkbox`	Avkrysningsboks for "Husk meg"
`Button`	Primærhandling for å sende skjemaet

Med feilmelding

Slik kan du vise valideringsfeil med FormMessage:

<div className="flex items-center justify-center bg-page p-4">
<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Logg inn</CardTitle>
    <CardDescription>
      Skriv inn e-post og passord for å logge inn på kontoen din.
    </CardDescription>
  </CardHeader>
  <CardContent className="flex flex-col gap-4">
    <FormField>
      <Label htmlFor="email-err">E-post</Label>
      <Input id="email-err" type="email" placeholder="navn@bekk.no" aria-invalid="true" />
      <FormMessage>Du må skrive inn en gyldig e-postadresse.</FormMessage>
    </FormField>
    <FormField>
      <Label htmlFor="password-err">Passord</Label>
      <Input id="password-err" type="password" placeholder="••••••••" aria-invalid="true" />
      <FormMessage>Passordet må være minst 8 tegn.</FormMessage>
    </FormField>
  </CardContent>
  <CardFooter>
    <Button className="w-full">Logg inn</Button>
  </CardFooter>
</Card>
</div>

Med lastestatus

Bruk isLoading på Button for å vise at skjemaet sendes:

<div className="flex items-center justify-center bg-page p-4">
<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Logg inn</CardTitle>
    <CardDescription>
      Skriv inn e-post og passord for å logge inn på kontoen din.
    </CardDescription>
  </CardHeader>
  <CardContent className="flex flex-col gap-4">
    <FormField>
      <Label htmlFor="email-load">E-post</Label>
      <Input id="email-load" type="email" value="ola@bekk.no" readOnly />
    </FormField>
    <FormField>
      <Label htmlFor="password-load">Passord</Label>
      <Input id="password-load" type="password" value="hemmelig123" readOnly />
    </FormField>
  </CardContent>
  <CardFooter>
    <Button className="w-full" isLoading loadingText="Logger inn...">
      Logg inn
    </Button>
  </CardFooter>
</Card>
</div>