Sheet

Kildekode på GitHub · Les som Markdown

Sheet er et sidepanel som glir inn fra en kant av skjermen. Bygget på Radix UI Dialog med fokusfelle, Escape-lukking og bakgrunnsoverlegg. Perfekt for mobilnavigasjon, filtre og redigeringspaneler.

Importering

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from "@kilden/designsystem";

Grunnleggende bruk

<Sheet>
<SheetTrigger asChild>
  <Button variant="outline">Åpne panel</Button>
</SheetTrigger>
<SheetContent>
  <SheetHeader>
    <SheetTitle>Innstillinger</SheetTitle>
    <SheetDescription>
      Endre innstillingene dine her. Klikk lagre når du er ferdig.
    </SheetDescription>
  </SheetHeader>
  <div style={{ padding: "1rem 0", display: "grid", gap: "1rem" }}>
    <FormField>
      <Label htmlFor="sheet-name">Navn</Label>
      <Input id="sheet-name" defaultValue="Ola Nordmann" />
    </FormField>
    <FormField>
      <Label htmlFor="sheet-email">E-post</Label>
      <Input id="sheet-email" defaultValue="ola@bekk.no" />
    </FormField>
  </div>
  <SheetFooter>
    <SheetClose asChild>
      <Button>Lagre</Button>
    </SheetClose>
  </SheetFooter>
</SheetContent>
</Sheet>

Fra venstre

<Sheet>
<SheetTrigger asChild>
  <Button variant="outline">Åpne fra venstre</Button>
</SheetTrigger>
<SheetContent side="left">
  <SheetHeader>
    <SheetTitle>Navigasjon</SheetTitle>
    <SheetDescription>Velg en side fra menyen.</SheetDescription>
  </SheetHeader>
  <nav style={{ display: "grid", gap: "0.5rem", paddingTop: "1rem" }}>
    <a href="#" style={{ padding: "0.5rem 0" }}>Hjem</a>
    <a href="#" style={{ padding: "0.5rem 0" }}>Komponenter</a>
    <a href="#" style={{ padding: "0.5rem 0" }}>Farger</a>
    <a href="#" style={{ padding: "0.5rem 0" }}>Ikoner</a>
  </nav>
</SheetContent>
</Sheet>

Fra topp og bunn

<div style={{ display: "flex", gap: "0.5rem" }}>
<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Fra toppen</Button>
  </SheetTrigger>
  <SheetContent side="top">
    <SheetHeader>
      <SheetTitle>Melding</SheetTitle>
      <SheetDescription>Dette panelet glir inn fra toppen.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>
<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Fra bunnen</Button>
  </SheetTrigger>
  <SheetContent side="bottom">
    <SheetHeader>
      <SheetTitle>Melding</SheetTitle>
      <SheetDescription>Dette panelet glir inn fra bunnen.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>
</div>

Bruksanbefalinger

☰ → Navigasjon / Filtre / Redigering

Bruk for sekundært innhold

Sheet egner seg for innhold som ikke trenger hele skjermen — mobilmeny, filtre, redigeringspaneler.

Sheet: «Er du sikker på at du vil slette?»

Ikke bruk for viktige beslutninger

For handlinger som krever brukerens fulle oppmerksomhet (bekreftelse, feilmelding), bruk Dialog i stedet.

Tilgjengelighet

Bygget på Dialog-primitiven med full fokusfelle
Escape lukker panelet
Klikk på bakgrunnsoverlegget lukker panelet
Fokus returneres til trigger-elementet ved lukking
SheetTitle brukes av skjermlesere til å identifisere panelet

Props

SheetContent

Prop	Type	Default	Beskrivelse
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`	Hvilken side panelet glir inn fra

Sheet (rot)

Prop	Type	Default	Beskrivelse
`open`	`boolean`	—	Kontrollert åpen-tilstand
`onOpenChange`	`(open: boolean) => void`	—	Kalles når tilstand endres
`defaultOpen`	`boolean`	`false`	Standard åpen-tilstand