Kontaktskjema

Et kontaktskjema som viser hvordan flere skjemaelementer fungerer sammen — tekstfelt, nedtrekksliste, radioknapper og tekstområde.

Komplett eksempel

<div className="flex items-center justify-center bg-page p-4">
<Card className="w-full max-w-lg">
  <CardHeader>
    <CardTitle>Kontakt oss</CardTitle>
    <CardDescription>
      Fyll ut skjemaet så tar vi kontakt med deg innen 2 virkedager.
    </CardDescription>
  </CardHeader>
  <CardContent className="flex flex-col gap-4">
    <div className="grid grid-cols-2 gap-4">
      <FormField>
        <Label htmlFor="first-name">Fornavn</Label>
        <Input id="first-name" placeholder="Ola" />
      </FormField>
      <FormField>
        <Label htmlFor="last-name">Etternavn</Label>
        <Input id="last-name" placeholder="Nordmann" />
      </FormField>
    </div>
    <FormField>
      <Label htmlFor="contact-email">E-post</Label>
      <Input id="contact-email" type="email" placeholder="ola@eksempel.no" />
    </FormField>
    <FormField>
      <Label htmlFor="subject">Emne</Label>
      <Select>
        <SelectTrigger id="subject">
          <SelectValue placeholder="Velg et emne" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="general">Generell henvendelse</SelectItem>
          <SelectItem value="support">Teknisk støtte</SelectItem>
          <SelectItem value="sales">Salg og samarbeid</SelectItem>
          <SelectItem value="feedback">Tilbakemelding</SelectItem>
        </SelectContent>
      </Select>
    </FormField>
    <FormField>
      <Label>Hvordan vil du bli kontaktet?</Label>
      <RadioGroup defaultValue="email" className="flex gap-4 mt-1">
        <div className="flex items-center gap-2">
          <RadioGroupItem value="email" id="contact-email-radio" />
          <Label htmlFor="contact-email-radio" className="font-normal">E-post</Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem value="phone" id="contact-phone" />
          <Label htmlFor="contact-phone" className="font-normal">Telefon</Label>
        </div>
      </RadioGroup>
    </FormField>
    <FormField>
      <Label htmlFor="message">Melding</Label>
      <Textarea id="message" placeholder="Skriv meldingen din her..." rows={4} />
      <FormDescription>Maks 500 tegn.</FormDescription>
    </FormField>
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button variant="outline">Avbryt</Button>
    <Button>Send melding</Button>
  </CardFooter>
</Card>
</div>

Komponenter som brukes

Komponent	Rolle
`Card`	Ramme rundt skjemaet
`FormField`	Grupperer label, input og hjelpetekst
`FormDescription`	Hjelpetekst under et felt
`Label`	Tilgjengelig ledetekst for hvert felt
`Input`	Tekstfelt for navn og e-post
`Select`	Nedtrekksliste for emnevalg
`RadioGroup`	Radioknapper for kontaktpreferanse
`Textarea`	Tekstområde for meldingen
`Button`	Primær- og sekundærhandling

Med validering

Slik ser skjemaet ut med valideringsfeil:

<div className="flex items-center justify-center bg-page p-4">
<Card className="w-full max-w-lg">
  <CardHeader>
    <CardTitle>Kontakt oss</CardTitle>
    <CardDescription>
      Fyll ut skjemaet så tar vi kontakt med deg innen 2 virkedager.
    </CardDescription>
  </CardHeader>
  <CardContent className="flex flex-col gap-4">
    <div className="grid grid-cols-2 gap-4">
      <FormField>
        <Label htmlFor="fn-err">Fornavn</Label>
        <Input id="fn-err" aria-invalid="true" />
        <FormMessage>Fornavn er påkrevd.</FormMessage>
      </FormField>
      <FormField>
        <Label htmlFor="ln-err">Etternavn</Label>
        <Input id="ln-err" aria-invalid="true" />
        <FormMessage>Etternavn er påkrevd.</FormMessage>
      </FormField>
    </div>
    <FormField>
      <Label htmlFor="email-err2">E-post</Label>
      <Input id="email-err2" type="email" value="ola@" aria-invalid="true" />
      <FormMessage>Du må skrive inn en gyldig e-postadresse.</FormMessage>
    </FormField>
    <FormField>
      <Label htmlFor="msg-err">Melding</Label>
      <Textarea id="msg-err" aria-invalid="true" />
      <FormMessage>Du må skrive en melding.</FormMessage>
    </FormField>
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button variant="outline">Avbryt</Button>
    <Button>Send melding</Button>
  </CardFooter>
</Card>
</div>

Med suksessmelding

Bruk Alert for å bekrefte at skjemaet ble sendt:

<div className="flex items-center justify-center bg-page p-4">
<Card className="w-full max-w-lg">
  <CardContent className="pt-6">
    <Alert variant="success">
      <AlertTitle>Meldingen er sendt!</AlertTitle>
      <AlertDescription>
        Takk for at du tok kontakt. Vi svarer deg innen 2 virkedager.
      </AlertDescription>
    </Alert>
  </CardContent>
  <CardFooter>
    <Button variant="outline" className="w-full">Send en ny melding</Button>
  </CardFooter>
</Card>
</div>