# Sundsvalls designsystem

AI-vänlig designsystem-portal för Sundsvalls kommun. Tokens, komponenter och riktlinjer på predikterbara URL:er.

Hela portalens innehåll i en fil. Bäst för att klistra in i en AI-assistent som engångskontext.



---

# För AI-agenter

> Hur en AI-assistent läser och använder Sundsvalls designsystem.

URL: https://ui.sundsvall.dev/for-ai/
Källa (markdown): https://ui.sundsvall.dev/for-ai.md

Den här portalen är byggd för att en AI-agent (Claude, Cursor, Copilot, ChatGPT m.fl.) ska kunna producera kod som följer Sundsvalls kommuns designsystem utan mänsklig redigering i mellanled.

## Vad du kan peka din AI mot

- **`https://ui.sundsvall.dev/llms.txt`** – kortfattad innehållsöversikt enligt llms.txt-konventionen.
- **`https://ui.sundsvall.dev/llms-full.txt`** – hela portalens innehåll i en fil. Bäst för en engångsuppladdning i kontexten.
- **Rå markdown per sida** – varje HTML-sida har en `.md`-variant på samma URL. Exempel: `/komponenter/button/` ↔ `/komponenter/button.md`.

## Rekommenderad prompt-mall

> Läs `https://ui.sundsvall.dev/llms-full.txt` och bygg [uppgift] som följer Sundsvalls kommuns designsystem. Använd endast tokens och komponenter som dokumenteras där. Skriv på svenska. Knapptexter ska vara verb i imperativ.

## Tekniska detaljer

- `robots.txt` tillåter all crawling.
- Sökmotor: Pagefind (för människor). AI:n läser markdown direkt.
- Sajten har `Content-Type: text/markdown` på `.md`-filer så att verktyg som Claude och ChatGPT plockar upp dem korrekt.
- Cache-Control: `no-cache` på `llms.txt`/`llms-full.txt` så att AI alltid får senaste version.


---

# Tillgänglighet

> Sundsvalls kommun följer WCAG 2.2 AA. Detta är de praktiska reglerna utvecklare och designers ska följa.

URL: https://ui.sundsvall.dev/guidelines/tillganglighet/
Källa (markdown): https://ui.sundsvall.dev/guidelines/tillganglighet.md

Sundsvalls kommun är en offentlig aktör och omfattas av **Lagen om tillgänglighet till digital offentlig service (DOS-lagen, 2018:1937)**. Alla digitala tjänster ska uppfylla **WCAG 2.2 nivå AA**.

## Grundkrav

- **Tangentbordsnavigering** måste fungera för all interaktion. Inget ska kräva mus eller pekskärm.
- **Synligt fokus** på alla interaktiva element. Använd token `--color-semantic-focus` med minst 2 px ringbredd.
- **Färgkontrast**: brödtext ≥ 4.5:1 mot bakgrund, stor text (≥ 24 px regular eller ≥ 19 px bold) ≥ 3:1.
- **Formulärfält** har alltid en synlig `<label>`. Placeholder ersätter aldrig en label.
- **Felmeddelanden** är knutna till sitt fält med `aria-describedby` och har röd ikon + text – aldrig enbart färg som signal.
- **Bilder** har `alt`-attribut. Dekorbilder får `alt=""`.
- **Rörelse**: respektera `prefers-reduced-motion` – ingen autospelande animation över 5 sekunder.

## Specifikt för komponenter

- **Knappar**: använd `<button>` för åtgärder, `<a>` för navigering. Aldrig en `<div onClick>`.
- **Modaler**: fokus flyttas in vid öppning, fångas tills stängning, återgår till triggern vid stängning. Esc stänger.
- **Tabeller** har `<th scope="col">` eller `<th scope="row">`.
- **Ikon-knappar** har `aria-label` med den åtgärd ikonen utför ("Stäng", inte "X").

## Verifiering

Innan en sida publiceras:

1. Kör automatiserad granskning med axe DevTools eller Lighthouse – 0 fel på "Accessibility".
2. Tabba igenom hela sidan utan mus.
3. Testa med skärmläsare (NVDA på Windows eller VoiceOver på Mac).
4. Kör testet med 200 % zoom – inget innehåll får klippas eller överlappa.


---

# Tonalitet och språk

> Hur Sundsvalls kommun pratar i sina digitala tjänster. Klarspråk, du-tilltal och verb i imperativ på knappar.

URL: https://ui.sundsvall.dev/guidelines/tonalitet/
Källa (markdown): https://ui.sundsvall.dev/guidelines/tonalitet.md

Sundsvalls kommun följer **Språklagen (2009:600)** och **klarspråksprincipen**: texten ska vara begriplig vid första genomläsningen för den som inte är expert.

## Grundregler

- **Du-tilltal**, aldrig "ni" eller passiv form. ("Du kan ansöka" – inte "Ansökan kan göras".)
- **Aktiv form** framför passiv. Klargör vem som gör vad.
- **Korta meningar.** Max ett huvudbudskap per mening.
- **Vanliga ord.** Skriv "lämna" hellre än "inkomma med".
- **Förkortningar** skrivs ut första gången, t.ex. "Bygg- och miljönämnden (BMN)".

## Knappar och länkar

- **Knapptext = verb i imperativ.** "Skicka ansökan", "Logga in", "Spara ändringar". Inte "OK", "Klicka här" eller substantiv som "Inloggning".
- **Länktext beskriver målet.** "Läs mer om bygglov", inte "Läs mer".
- **Maxlängd:** primärknappar 1–3 ord när det går.

## Rubriker

- **H1** beskriver hela sidan. En per sida.
- **H2** används för huvudsektioner. Skriv som en mini-rubrik ur läsarens perspektiv: "När behöver jag bygglov?" snarare än "Bygglovsregler".

## Felmeddelanden

- Säg **vad som är fel och vad användaren kan göra**. Inte vad systemet inte kan.
- Ja: "E-postadressen saknar ett snabel-a." Nej: "Ogiltig inmatning."
- Skuld läggs inte på användaren.

## Datum, klockslag, siffror

- Datum: `2026-05-27` eller "27 maj 2026". Inte amerikansk ordning.
- Klockslag: 24-timmarsformat, `14:30`.
- Telefonnummer: `060-19 10 00`.


---

# Färger

> Sundsvalls kommuns färgpalett. Primitiver per kulör och de fyra varumärkesteman vattjom, grönsta, juniskär och björnstigen. Alla värden hämtas live från @sk-web-gui/theme.

URL: https://ui.sundsvall.dev/identitet/farger/
Källa (markdown): https://ui.sundsvall.dev/identitet/farger.md

import ColorPalette from '../../../components/ColorPalette.astro';
import ColorSwatch from '../../../components/ColorSwatch.astro';
import ThemePalette from '../../../components/ThemePalette.astro';
import { Aside } from '@astrojs/starlight/components';

Sundsvalls designsystem bygger på en bred färgpalett av **primitiver** (rena kulörskalor i 10 steg, 50–900) och **semantiska teman** som mappar primitiverna mot meningsbärande färger för olika kontexter. Värden på den här sidan läses live från `src/data/tokens.json` – som i sin tur genereras från `@sk-web-gui/theme`. Inget är hårdkodat.

<Aside type="caution" title="Aldrig hårdkoda hex">
	**Vad du ska göra:** Använd CSS-variabel: `var(--color-light-vattjom-surface-primary-default)` eller motsvarande Tailwind-klass från `@sk-web-gui/core`.

	**Vad du *inte* ska göra:** Skriva `background: #005595` direkt. Då fungerar inte dark mode, varumärkesuppdateringar måste sökas/ersättas manuellt, och en AI som läser din kod kan inte veta vilken semantik färgen har.
</Aside>

## Primitiver

Detta är basskalorna. Använd dem för att bygga semantik, inte direkt i komponentkod. Token-namn: `var(--color-primitives-<kulör>-<steg>)`.

<ColorPalette group="Gray" prefix="ColorPrimitivesGray" />
<ColorPalette group="Blue" prefix="ColorPrimitivesBlue" />
<ColorPalette group="Green" prefix="ColorPrimitivesGreen" />
<ColorPalette group="Purple" prefix="ColorPrimitivesPurple" />
<ColorPalette group="Pink" prefix="ColorPrimitivesPink" />
<ColorPalette group="Orange" prefix="ColorPrimitivesOrange" />
<ColorPalette group="Red" prefix="ColorPrimitivesRed" />

## Varumärkesteman

Sundsvall har fyra varumärkesteman uppkallade efter platser i kommunen. Varje tema har samma struktur: `background.100/200/300`, `surface.primary.default/hover`, `surface.accent.default/hover`, `text.default/primary/secondary`. Komponenterna i `@sk-web-gui/react` tar dessa som `color`-prop, t.ex. `<Button color="vattjom">`.

<ThemePalette
	title="Vattjom"
	prefix="ColorLightVattjom"
	description="Primärt blått varumärkestema (baserat på primitives.blue). Används för standardprimärknappar, länkar och fokusringar."
/>

<ThemePalette
	title="Grönsta"
	prefix="ColorLightGronsta"
	description="Grönt tema (baserat på primitives.green). För framgångsindikationer, miljö- och hållbarhetsbudskap."
/>

<ThemePalette
	title="Juniskär"
	prefix="ColorLightJuniskar"
	description="Magenta/rosa tema (baserat på primitives.pink). För framträdande, expressiva ytor – använd sparsamt."
/>

<ThemePalette
	title="Björnstigen"
	prefix="ColorLightBjornstigen"
	description="Lila tema (baserat på primitives.purple). För att differentiera sekundära flöden från huvudbudskapet."
/>

## Status

Funktionella färger för meddelanden. Samma struktur som varumärkesteman.

<ThemePalette
	title="Success"
	prefix="ColorLightSuccess"
	description="Bekräftelse, klart, godkänd."
/>

<ThemePalette
	title="Warning"
	prefix="ColorLightWarning"
	description="Varning som inte blockerar – något behöver uppmärksammas."
/>

<ThemePalette
	title="Error"
	prefix="ColorLightError"
	description="Fel, blockerande validering."
/>

<ThemePalette
	title="Info"
	prefix="ColorLightInfo"
	description="Neutralt informativt budskap."
/>

## I koden – korrekta variabelnamn

En AI-assistent som inte läser den här sidan brukar gissa fel på två sätt: hitta på `--color-semantic-*`-variabler (finns inte) eller hårdkoda hex. Här är facit för de vanligaste fallen.

### Fokusring (WCAG-krav)

```css
:focus-visible {
	outline: 2px solid var(--color-light-ring);
	outline-offset: 2px;
}
```

Variabeln heter `--color-light-ring` (motsvarande `--color-dark-ring` för mörkt läge). **Inte** `--color-semantic-focus`, `--color-focus`, `--focus-ring` — sådana finns inte.

### Alerts och statusmeddelanden

Använd den semantiska familjen för det status-meddelande som är aktuellt. Strukturen är identisk med varumärkesteman:

```css
/* Error alert */
.alert-error {
	background: var(--color-light-error-surface-accent-default);   /* ljus rosa bakgrund */
	border-left-color: var(--color-light-error-surface-primary-default); /* mörkröd kant */
	color: var(--color-light-error-text-default);                  /* mörkröd text */
}

/* Warning */
.alert-warning {
	background: var(--color-light-warning-surface-accent-default);
	border-left-color: var(--color-light-warning-surface-primary-default);
	color: var(--color-light-warning-text-default);
}
/* analogt för success och info */
```

**Inte** `--color-semantic-error`, `--color-error`, eller hårdkodad hex. Du får ingen dark mode och ingen varumärkesuppdatering om du gissar.

### Primärknapp på varumärkestema

```css
.btn-primary {
	background: var(--color-light-vattjom-surface-primary-default);
	color: var(--color-light-vattjom-text-secondary);
}
.btn-primary:hover {
	background: var(--color-light-vattjom-surface-primary-hover);
}
```

Byt `vattjom` mot `gronsta` / `juniskar` / `bjornstigen` för andra teman. Reactanvändare slipper detta helt: `<Button color="vattjom" variant="primary">` ger samma resultat.

### Vanliga AI-gissningar som **inte** finns

| Felaktigt (vanlig gissning)          | Det rätta                                                  |
|--------------------------------------|------------------------------------------------------------|
| `--color-semantic-focus`             | `--color-light-ring`                                       |
| `--color-semantic-error`             | `--color-light-error-surface-primary-default`              |
| `--color-semantic-warning`           | `--color-light-warning-surface-primary-default`            |
| `--color-semantic-success`           | `--color-light-success-surface-primary-default`            |
| `--color-semantic-info`              | `--color-light-info-surface-primary-default`               |
| `--color-brand-primary`              | `--color-light-vattjom-surface-primary-default`            |
| `--color-text-on-brand`              | `--color-light-vattjom-text-secondary` (text på primary)   |
| `--space-md`, `--space-lg`           | Numeriska: `--space-16` (1.6rem), `--space-24`, osv.       |

## Mörkt läge

Stilguiden stödjer även dark mode. Alla teman ovan har motsvarande `ColorDark*`-tokens med samma struktur. På den här portalen visas bara light-tokens; för dark, se [packages/theme/src/colors.ts](https://github.com/Sundsvallskommun/web-shared-components/blob/main/packages/theme/src/colors.ts).

## Källa

Färgerna definieras i [`packages/theme/src/colors.ts`](https://github.com/Sundsvallskommun/web-shared-components/blob/main/packages/theme/src/colors.ts). Importeras i runtime via `@sk-web-gui/theme`. CSS-variabler genereras av Style Dictionary i den här portalen vid `npm run tokens:sync`.


---

# Ikoner

> Sundsvalls designsystem använder Lucide som primärt ikonbibliotek, integrerat via @sk-web-gui/icon och @sk-web-gui/lucide-icon.

URL: https://ui.sundsvall.dev/identitet/ikoner/
Källa (markdown): https://ui.sundsvall.dev/identitet/ikoner.md

import { Aside } from '@astrojs/starlight/components';

Sundsvalls designsystem använder **[Lucide](https://lucide.dev/icons/)** som primärt ikonbibliotek. Det är ett open source-bibliotek (ISC-licens) med över 1500 ikoner, designat med konsekvent stroke-bredd och tydlig läsbarhet vid små storlekar.

## Snabbstart

Det finns två ikon-paket:

| Paket                       | När använda                                                        |
|-----------------------------|--------------------------------------------------------------------|
| `@sk-web-gui/lucide-icon`   | Vanliga fallet. Tar en Lucide-komponent som prop och stylar den.   |
| `@sk-web-gui/icon`          | Generisk wrapper för valfri SVG-React-komponent (inte bara Lucide).|

## Exempel

```tsx
import { LucideIcon } from '@sk-web-gui/react';
import { Heart, Search, Menu } from 'lucide-react';

// Standard – ärver färg från förälder
<LucideIcon name={Heart} />

// Med specifik storlek
<LucideIcon name={Search} size={24} />

// Padded variant
<LucideIcon.Padded name={Menu} />
```

## Storlekar och färg

Ikoner ärver `color` och `font-size` från sin förälder. När en `<Button leftIcon={...}>` renderar en ikon skalas den automatiskt mot knappens storlek.

## Tillgänglighet

- **Funktionella ikoner** (knappar med endast ikon, ikonlänkar): kräver `aria-label` med åtgärden i imperativ, inte ikonens namn. `"Stäng"`, inte `"X"`.
- **Dekorativa ikoner** (bredvid text): `aria-hidden="true"`. Texten gör jobbet.

## Källa

- Komponent: [packages/lucide-icon](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/lucide-icon)
- Ikonkatalog: [lucide.dev/icons](https://lucide.dev/icons/)


---

# Logotyper

> Sundsvalls kommuns logotyp – språkversioner, frizon, färgval och favicon-beskärning.

URL: https://ui.sundsvall.dev/identitet/logotyper/
Källa (markdown): https://ui.sundsvall.dev/identitet/logotyper.md

import { Aside } from '@astrojs/starlight/components';

Sundsvalls kommuns logotyp finns i tre språkversioner och fyra färgval. Den ska aldrig modifieras, lutas eller dekoreras.

## Vad du behöver veta

| Egenskap        | Regel                                                                                                  |
|-----------------|--------------------------------------------------------------------------------------------------------|
| **Frizon**      | Minst lika stor som logotypens "S" runt hela märket. Inget får placeras inom denna zon.                 |
| **Minsta storlek** | Logotypen ska vara läsbar. Sätt aldrig under 16 px hög för digital användning.                       |
| **Bakgrund**    | Använd den variant som har tillräcklig kontrast mot bakgrunden (4.5:1 minst).                            |
| **Beskärning**  | Endast som favicon (16/32/64 px) får logotypen beskäras till "S"-märket utan kommunnamn.                 |

<Aside type="caution" title="Aldrig">
	- Aldrig rotera, luta eller spegla logotypen.
	- Aldrig byta typsnitt eller färg utanför de godkända paletterna.
	- Aldrig placera logotypen mot bakgrund med otillräcklig kontrast.
</Aside>

## Implementation

Logotypen finns som React-komponent:

```tsx
import { Logo } from '@sk-web-gui/react';

<Logo variant="primary" />
```

Se [Logo-komponenten](/komponenter/logo/) för API och varianter.

## Källa

- Riktlinjer: [stilguide.sundsvall.se → Identitet → Logotyper](https://stilguide.sundsvall.se/?path=/docs/identitet-logotyper--dokumentation)
- Komponent: [packages/logo](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/logo)


---

# SiteVision-design

> Designriktlinjer för Sundsvalls kommuns SiteVision-baserade webbplatser. Underhålls direkt i stilguiden.

URL: https://ui.sundsvall.dev/identitet/sitevision/
Källa (markdown): https://ui.sundsvall.dev/identitet/sitevision.md

Sundsvalls kommun designar sina publika webbplatser i SiteVision. Detaljerade designriktlinjer för **desktop**- och **mobilvy** finns i den ursprungliga stilguiden och har inte importerats hit eftersom de innehåller hundratals megabyte med skärmbilder som inte gör nytta för AI-agenter som ska bygga kod.

## Läs riktlinjerna direkt

- **[Hur vi designar webbplatser för SiteVision – Webbvy](https://stilguide.sundsvall.se/?path=/docs/guider-hur-vi-designar-webbplatser-f%C3%B6r-sitevision-webbvy--dokumentation)**
- **[Hur vi designar webbplatser för SiteVision – Mobilvy](https://stilguide.sundsvall.se/?path=/docs/guider-hur-vi-designar-webbplatser-f%C3%B6r-sitevision-mobilvy--dokumentation)**

Använd den här portalen (`ui.sundsvall.dev`) för komponenter och tokens, och stilguidens egna sidor för SiteVision-specifik layout och redaktionellt arbete.


---

# Typografi

> Sundsvalls kommun använder Raleway för rubriker och Arial för brödtext. Storlekarna är semantiska – ingen pixel-direktanvändning.

URL: https://ui.sundsvall.dev/identitet/typografi/
Källa (markdown): https://ui.sundsvall.dev/identitet/typografi.md

import TypeSample from '../../../components/TypeSample.astro';
import { Aside } from '@astrojs/starlight/components';

## Typsnitt

Sundsvalls kommun använder **Raleway** för rubriker och display-text, och **Arial** för brödtext och UI. Båda används för att de redan finns installerade på de flesta system.

| Stack            | Använd för                                | Token                          |
|------------------|-------------------------------------------|--------------------------------|
| Raleway, Arial   | Rubriker, hero, display                   | `--font-family-header`         |
| Arial, Helvetica | Brödtext, knappar, formulär, navigering   | `--font-family-default`        |
| monospace        | Kod, tabeller med fast bredd              | `--font-family-mono`           |

<Aside type="tip" title="Webbfont">
	Raleway laddas inte från CDN i `@sk-web-gui/core`-paketet. Det är upp till applikationen att inkludera den (t.ex. via Google Fonts eller självhost). Om Raleway saknas faller stacken tillbaka på Arial automatiskt.
</Aside>

## Rubriker (Raleway)

<TypeSample
	fontFamily="Raleway, Arial, sans-serif"
	fontWeight={400}
	sizes={[52, 40, 32, 24, 20, 18]}
	sampleText="Den enda meningen om designsystem som inte finns"
/>

### Raleway Bold

<TypeSample
	fontFamily="Raleway, Arial, sans-serif"
	fontWeight={700}
	sizes={[52, 40, 32, 24, 20, 18]}
	sampleText="Den enda meningen om designsystem som inte finns"
/>

## Brödtext (Arial)

<TypeSample
	fontFamily="Arial, Helvetica, sans-serif"
	fontWeight={400}
	sizes={[24, 20, 18, 16, 14, 12, 10]}
	sampleText="Den enda meningen om designsystem som inte finns"
/>

### Arial Bold

<TypeSample
	fontFamily="Arial, Helvetica, sans-serif"
	fontWeight={700}
	sizes={[24, 20, 18, 16, 14, 12, 10]}
	sampleText="Den enda meningen om designsystem som inte finns"
/>

## Knapptext (Raleway Bold)

<TypeSample
	fontFamily="Raleway, Arial, sans-serif"
	fontWeight={700}
	sizes={[16, 14, 12]}
	sampleText="Skicka ansökan"
/>

## Semantiska storlekar

Designsystemets `fontSizes` är **semantiska**, inte numeriska. Använd dessa i kod – inte rå pixel-storlek.

| Token                   | Värde      | När använda                           |
|-------------------------|------------|---------------------------------------|
| `font-size-display-1`   | 8rem       | Hero / landningssida                  |
| `font-size-h-1`         | 4rem       | Sidans huvudrubrik                    |
| `font-size-h-2`         | 3.2rem     | Sektionsrubrik                        |
| `font-size-h-3`         | 2.6rem     | Underrubrik                           |
| `font-size-h-4`         | 2.4rem     | Mindre rubrik                         |
| `font-size-lead`        | 2rem       | Ingress                               |
| `font-size-base`        | 1.6rem     | Brödtext (standard)                   |
| `font-size-large`       | 1.8rem     | Större brödtext                       |
| `font-size-small`       | 1.4rem     | Metadata, hjälptext                   |
| `font-size-label-*`     | 1.2–1.8rem | Formuläretiketter (storlek per size)  |

Storlekarna har responsiva varianter (`lg`, `md`, `sm`) — komponenterna i `@sk-web-gui/react` plockar rätt storlek per breakpoint automatiskt.

## Källa

Typsnittsstack: [packages/theme/src/fonts.ts](https://github.com/Sundsvallskommun/web-shared-components/blob/main/packages/theme/src/fonts.ts). Storlekar: [packages/theme/src/units.ts](https://github.com/Sundsvallskommun/web-shared-components/blob/main/packages/theme/src/units.ts).


---

# Sundsvalls designsystem

> AI-vänlig portal för Sundsvalls kommuns designsystem. Tokens, komponenter och riktlinjer hämtade direkt från @sk-web-gui på predikterbara URL:er.

URL: https://ui.sundsvall.dev/
Källa (markdown): https://ui.sundsvall.dev/index.md

import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';

## Vad finns här

<CardGrid>
	<Card title="Identitet" icon="approve-check">
		Färger, typografi, ikoner och logotyper. Värdena hämtas live från `@sk-web-gui/theme`.
	</Card>
	<Card title="Komponenter" icon="puzzle">
		Auto-genererad dokumentation per komponent från `web-shared-components`-Storybook: props, varianter, källa-länkar.
	</Card>
	<Card title="Riktlinjer" icon="open-book">
		Tillgänglighet (WCAG 2.2 AA), tonalitet och språkbruk för Sundsvalls digitala tjänster.
	</Card>
	<Card title="För AI-agenter" icon="rocket">
		`llms.txt`, rå markdown på varje URL och tillåten crawling. Bygg rätt från start med en AI-assistent.
	</Card>
</CardGrid>

## Snabblänkar

<CardGrid>
	<LinkCard title="llms-full.txt" href="/llms-full.txt" description="Hela portalens innehåll i en fil – för engångsuppladdning i en AI-assistent." />
	<LinkCard title="Färger" href="/identitet/farger/" description="Primitiver + de fyra varumärkesteman vattjom, grönsta, juniskär, björnstigen." />
	<LinkCard title="Typografi" href="/identitet/typografi/" description="Raleway för rubriker, Arial för brödtext." />
	<LinkCard title="Button" href="/komponenter/button/" description="Den primära interaktiva komponenten. Props, varianter, kodexempel." />
</CardGrid>

## Förhållande till stilguide.sundsvall.se

Den här portalen speglar [`Sundsvallskommun/web-shared-components`](https://github.com/Sundsvallskommun/web-shared-components) i ett AI-vänligt format. Den **ursprungliga stilguiden** ([stilguide.sundsvall.se](https://stilguide.sundsvall.se)) är fortfarande den primära referensen för människor med interaktiv Storybook och fullständiga SiteVision-designriktlinjer. Den här portalen är optimerad för att en AI-assistent ska kunna producera korrekt kod direkt mot designsystemet, utan att människor i mellanled.


---

# Alert

> Alert.Component – komponent från @sk-web-gui/alert.

URL: https://ui.sundsvall.dev/komponenter/alert/
Källa (markdown): https://ui.sundsvall.dev/komponenter/alert.md

{/* AUTO-GENERATED från @sk-web-gui/alert@1.1.2. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`Alert.Component` finns i [`@sk-web-gui/alert`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/alert). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { Alert.Component } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `type` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'error'` | `–` |  |
| `size` | `'sm' \| 'md' \| 'lg'` | `–` |  |
| `children` | `React.ReactNode` | `–` |  |




## Standardargs (från Meta.args)

```json
{
  "type": "info",
  "size": "md"
}
```

## Storyvarianter

- **Template** – standardstory

## Källa

- Implementation: [@sk-web-gui/alert](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/alert)
- Storybook: [Alert](https://stilguide.sundsvall.se/?path=/docs/komponenter-alert--dokumentation)


---

# Button.Group

> Button.Group – komponent från @sk-web-gui/button.

URL: https://ui.sundsvall.dev/komponenter/button-button-group/
Källa (markdown): https://ui.sundsvall.dev/komponenter/button-button-group.md

{/* AUTO-GENERATED från @sk-web-gui/button@2.1.10. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`Button.Group` finns i [`@sk-web-gui/button`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/button). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { Button.Group } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `disabled` | `boolean` | `–` | Set all wrapped button disabled |
| `size` | `ButtonProps['size']` | `–` | Set all wrapped button size |
| `variant` | `ButtonProps['variant']` | `–` | Set all wrapped button appearance |
| `inverted` | `boolean` | `–` |  |
| `children` | `React.ReactNode` | `–` |  |




## Storyvarianter

- **Template** – standardstory

## Källa

- Implementation: [@sk-web-gui/button](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/button)
- Storybook: [Button.Group](https://stilguide.sundsvall.se/?path=/docs/komponenter-button-button.group--dokumentation)


---

# Button

> Button – komponent från @sk-web-gui/button.

URL: https://ui.sundsvall.dev/komponenter/button/
Källa (markdown): https://ui.sundsvall.dev/komponenter/button.md

{/* AUTO-GENERATED från @sk-web-gui/button@2.1.10. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`Button` finns i [`@sk-web-gui/button`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/button). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { Button } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `loading` | `boolean` | `false` | Sets loading spinner |
| `disabled` | `boolean` | `false` | Sets disabled |
| `active` | `boolean` | `–` | Makes button active |
| `loadingText` | `string` | `` | Sets loading text |
| `leftIcon` | `React.ReactElement` | `–` | Set the original html type of button Adds icon before button label |
| `rightIcon` | `React.ReactElement` | `–` | Adds icon after button label |
| `color` | `'info' \| 'success' \| 'primary' \| 'warning' \| 'error' \| 'vattjom' \| 'gronsta' \| 'bjornstigen' \| 'juniskar'` | `primary` | Sets color |
| `size` | `'sm' \| 'md' \| 'lg'` | `md` | Sets size |
| `variant` | `'link' \| 'primary' \| 'secondary' \| 'tertiary' \| 'ghost'` | `primary` | Sets variant |
| `children` | `React.ReactNode` | `–` | React node |
| `rounded` | `boolean` | `false` | Sets rounded variant |
| `inverted` | `boolean` | `false` | Sets inverted style |
| `iconButton` | `boolean` | `false` | Sets if icon button |
| `aria-disabled` | `React.ButtonHTMLAttributes<HTMLButtonElement>['aria-disabled']` | `–` | Sets aria-disabled |
| `showBackground` | `boolean` | `–` | If the background of the button should be shown @default true |
| `as` | `React.ElementType` | `–` | @default button |

## Enum-värden

- **size**: `sm`, `md`, `lg`
- **variant**: `link`, `primary`, `secondary`, `tertiary`
- **type**: `reset`, `button`, `submit`
- **color**: `undefined`, `primary`, `gronsta`, `vattjom`, `juniskar`, `bjornstigen`, `error`, `warning`, `success`
- **aria-disabled**: `undefined`, `true`, `false`



## Standardargs (från Meta.args)

```json
{
  "children": "Knapptext",
  "color": "primary"
}
```

## Storyvarianter

- **Template** – standardstory

## Källa

- Implementation: [@sk-web-gui/button](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/button)
- Storybook: [Button](https://stilguide.sundsvall.se/?path=/docs/komponenter-button--dokumentation)


---

# Checkbox.Group

> Checkbox.Group – komponent från @sk-web-gui/forms.

URL: https://ui.sundsvall.dev/komponenter/checkbox-checkbox-group/
Källa (markdown): https://ui.sundsvall.dev/komponenter/checkbox-checkbox-group.md

{/* AUTO-GENERATED från @sk-web-gui/forms@2.9.2. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`Checkbox.Group` finns i [`@sk-web-gui/forms`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { Checkbox.Group } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `id` | `CheckboxItemProps['id']` | `–` | The id of the checkbox group. |
| `name` | `CheckboxItemProps['name']` | `–` | The name of the checkbox group. This prop is passed to each checbox |
| `children` | `React.ReactNode` | `–` | The content of the checkbox group. Must be the `Checkbox` component |
| `defaultValue` | `Array<CheckboxItemProps['value']>` | `–` | The initial value of the checkbox group |
| `value` | `Array<CheckboxItemProps['value']>` | `–` | The value of the checkbox group |
| `onChange` | `(value: Array<CheckboxItemProps['value']>) => void` | `–` | The callback fired when any children Checkbox is checked or unchecked |
| `direction` | `'row' \| 'column'` | `–` | If `true`, the checkboxes will aligned horizontally. @default column |
| `size` | `CheckboxItemProps['size']` | `–` | Size of all wrapped checkbox |
| `color` | `CheckboxItemProps['color']` | `–` | Color of all wrapped checkbox |




## Storyvarianter

- **Template** – standardstory
- **ExampleWithForm** – standardstory
- **ExampleWithState** – standardstory
- **ExampleWithIndeterminate** – standardstory

## Källa

- Implementation: [@sk-web-gui/forms](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms)
- Storybook: [Checkbox.Group](https://stilguide.sundsvall.se/?path=/docs/komponenter-checkbox-checkbox.group--dokumentation)


---

# Checkbox

> Checkbox – komponent från @sk-web-gui/forms.

URL: https://ui.sundsvall.dev/komponenter/checkbox/
Källa (markdown): https://ui.sundsvall.dev/komponenter/checkbox.md

{/* AUTO-GENERATED från @sk-web-gui/forms@2.9.2. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`Checkbox` finns i [`@sk-web-gui/forms`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { Checkbox } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `Component` | `typeof InternalCheckbox` | `–` |  |
| `Group` | `typeof CheckboxGroup` | `–` |  |




## Storyvarianter

- **Template** – standardstory
- **ExampleWithForm** – standardstory
- **Inaktiverad** – standardstory

## Källa

- Implementation: [@sk-web-gui/forms](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms)
- Storybook: [Checkbox](https://stilguide.sundsvall.se/?path=/docs/komponenter-checkbox--dokumentation)


---

# Combobox

> Combobox.Input – komponent från @sk-web-gui/forms.

URL: https://ui.sundsvall.dev/komponenter/combobox/
Källa (markdown): https://ui.sundsvall.dev/komponenter/combobox.md

{/* AUTO-GENERATED från @sk-web-gui/forms@2.9.2. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`Combobox.Input` finns i [`@sk-web-gui/forms`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { Combobox.Input } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `disabled` | `boolean` | `–` | Makes input invalid |
| `invalid` | `boolean` | `–` |  |
| `InputComp` | `React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>>` | `–` |  |




## Standardargs (från Meta.args)

```json
{
  "placeholder": "Välj en frukt",
  "searchPlaceholder": "Skriv för att filtrera"
}
```

## Storyvarianter

- **Template** – standardstory
- **WithOptionGroups** – standardstory
- **CustomFilterHandler** – standardstory
- **SingleChoiceWithForm** – standardstory
- **MultipleChoicesWithForm** – standardstory
- **MultipleChoicesWithFormAndAddFunction** – standardstory

## Källa

- Implementation: [@sk-web-gui/forms](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms)
- Storybook: [Combobox](https://stilguide.sundsvall.se/?path=/docs/komponenter-combobox--dokumentation)


---

# DatePicker

> DatePicker – komponent från @sk-web-gui/forms.

URL: https://ui.sundsvall.dev/komponenter/datepicker/
Källa (markdown): https://ui.sundsvall.dev/komponenter/datepicker.md

{/* AUTO-GENERATED från @sk-web-gui/forms@2.9.2. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`DatePicker` finns i [`@sk-web-gui/forms`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { DatePicker } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `type` | `'date' \| 'time' \| 'datetime-local'` | `–` |  |




## Storyvarianter

- **Template** – standardstory
- **Disabled** – standardstory
- **Invalid** – standardstory
- **Storlekar** – standardstory
- **Datum** – standardstory
- **Tid** – standardstory
- **DatumTid** – standardstory
- **WithForms** – standardstory

## Källa

- Implementation: [@sk-web-gui/forms](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms)
- Storybook: [DatePicker](https://stilguide.sundsvall.se/?path=/docs/komponenter-datepicker--dokumentation)


---

# FormControl

> FormControl – komponent från @sk-web-gui/forms.

URL: https://ui.sundsvall.dev/komponenter/formular-formcontrol/
Källa (markdown): https://ui.sundsvall.dev/komponenter/formular-formcontrol.md

{/* AUTO-GENERATED från @sk-web-gui/forms@2.9.2. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`FormControl` finns i [`@sk-web-gui/forms`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { FormControl } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `children` | `React.ReactNode` | `–` |  |
| `fieldset` | `true` | `–` |  |




## Storyvarianter

- **Template** – standardstory
- **Storlekar** – standardstory
- **Invaliderad** – standardstory
- **Obligatorisk** – standardstory

## Källa

- Implementation: [@sk-web-gui/forms](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms)
- Storybook: [FormControl](https://stilguide.sundsvall.se/?path=/docs/komponenter-formular-formcontrol--dokumentation)


---

# Formulär

> Input – komponent från @sk-web-gui/forms.

URL: https://ui.sundsvall.dev/komponenter/formular/
Källa (markdown): https://ui.sundsvall.dev/komponenter/formular.md

{/* AUTO-GENERATED från @sk-web-gui/forms@2.9.2. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`Input` finns i [`@sk-web-gui/forms`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { Input } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `hideExtra` | `boolean` | `–` | If you want to hide native extra apperances, such as number arrows and icons @default true |
| `invalid` | `boolean` | `–` | Makes input invalid |
| `readOnly` | `React.InputHTMLAttributes<T>['readOnly']` | `–` | Makes input readOnly |
| `disabled` | `React.InputHTMLAttributes<T>['disabled']` | `–` | Makes input disabled |
| `size` | `'sm' \| 'md' \| 'lg'` | `–` | Size of the input |
| `as` | `React.ElementType` | `–` | The element or component to use in place of `input` |
| `type` | `React.InputHTMLAttributes<T>['type']` | `–` | Input type |
| `placeholder` | `React.InputHTMLAttributes<T>['placeholder']` | `–` |  |
| `value` | `React.InputHTMLAttributes<T>['value']` | `–` |  |
| `autoFocus` | `boolean` | `–` |  |




## Standardargs (från Meta.args)

```json
{
  "placeholder": "Sök..."
}
```

## Storyvarianter

- **Template** – standardstory
- **Disabled** – standardstory
- **Invalid** – standardstory
- **Storlekar** – standardstory
- **Datum** – standardstory
- **Tid** – standardstory
- **DatumTid** – standardstory
- **Addin** – standardstory
- **Addon** – standardstory

## Källa

- Implementation: [@sk-web-gui/forms](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms)
- Storybook: [Formulär](https://stilguide.sundsvall.se/?path=/docs/komponenter-formular--dokumentation)


---

# Link

> Link – komponent från @sk-web-gui/link.

URL: https://ui.sundsvall.dev/komponenter/link/
Källa (markdown): https://ui.sundsvall.dev/komponenter/link.md

{/* AUTO-GENERATED från @sk-web-gui/link@1.2.9. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`Link` finns i [`@sk-web-gui/link`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/link). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { Link } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `disabled` | `boolean` | `false` | Sets disabled |
| `external` | `boolean` | `false` | Sets external |
| `children` | `React.ReactNode` | `–` | React node |
| `hideExternalIcon` | `boolean` | `false` | Sets hideExternalIcon |
| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `` | Sets size |
| `strong` | `boolean` | `false` | Sets strong |
| `variant` | `'primary' \| 'tertiary'` | `primary` | Sets variant |
| `inverted` | `boolean` | `false` | Inverted colors |

## Enum-värden

- **size**: `undefined`, `sm`, `md`, `lg`, `xl`
- **variant**: `primary`, `tertiary`



## Standardargs (från Meta.args)

```json
{
  "href": "#"
}
```

## Storyvarianter

- **Template** – standardstory

## Källa

- Implementation: [@sk-web-gui/link](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/link)
- Storybook: [Link](https://stilguide.sundsvall.se/?path=/docs/komponenter-link--dokumentation)


---

# RadioButton.Group

> RadioButton.Group – komponent från @sk-web-gui/forms.

URL: https://ui.sundsvall.dev/komponenter/radiobutton-radiobutton-group/
Källa (markdown): https://ui.sundsvall.dev/komponenter/radiobutton-radiobutton-group.md

{/* AUTO-GENERATED från @sk-web-gui/forms@2.9.2. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`RadioButton.Group` finns i [`@sk-web-gui/forms`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { RadioButton.Group } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `id` | `string` | `–` | The id of the radio group. |
| `name` | `string` | `–` | The name of the radio group. This prop is passed to each checbox |
| `children` | `React.ReactNode` | `–` | The content of the radio group. Must be the `Radio` component |
| `defaultValue` | `RadioButtonProps['value']` | `–` | The initial value of the radio group |
| `value` | `RadioButtonProps['value']` | `–` | The value of the radio group |
| `size` | `RadioButtonProps['size']` | `–` | Size of all wrapped radio |
| `color` | `RadioButtonProps['color']` | `–` | Color of all wrapped radio |
| `onChange` | `(event: React.ChangeEvent<HTMLInputElement>, value: RadioButtonProps['value']) => void` | `–` | The callback fired when any children Radio is checked or unchecked |
| `inline` | `boolean` | `–` | If `true`, the radio will aligned horizontally. |




## Storyvarianter

- **Template** – standardstory
- **ExampleWithForm** – standardstory

## Källa

- Implementation: [@sk-web-gui/forms](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms)
- Storybook: [RadioButton.Group](https://stilguide.sundsvall.se/?path=/docs/komponenter-radiobutton-radiobutton.group--dokumentation)


---

# RadioButton

> RadioButton – komponent från @sk-web-gui/forms.

URL: https://ui.sundsvall.dev/komponenter/radiobutton/
Källa (markdown): https://ui.sundsvall.dev/komponenter/radiobutton.md

{/* AUTO-GENERATED från @sk-web-gui/forms@2.9.2. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`RadioButton` finns i [`@sk-web-gui/forms`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { RadioButton } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `invalid` | `boolean` | `–` | Makes radio invalid |
| `required` | `React.InputHTMLAttributes<T>['required']` | `–` | Makes radio required |
| `readOnly` | `React.InputHTMLAttributes<T>['readOnly']` | `–` | Makes radio readOnly |
| `disabled` | `React.InputHTMLAttributes<T>['disabled']` | `–` | Makes radio disabled |
| `defaultChecked` | `boolean` | `–` | If `true`, the radio will be initially checked. |
| `checked` | `boolean` | `–` | If `true`, the radio will be checked. You'll need to pass `onChange` to update it's value (since it's now controlled) |
| `onChange` | `React.ChangeEventHandler<HTMLInputElement>` | `–` | The callback invoked when the checked state of the `radio` changes.. |
| `size` | `'sm' \| 'md' \| 'lg'` | `–` | Size of the radio @default md |
| `children` | `React.ReactNode` | `–` | The children is the label to be displayed to the right of the radio. |




## Storyvarianter

- **Template** – standardstory
- **Invaliderad** – standardstory
- **Inaktiverad** – standardstory
- **Storlekar** – standardstory
- **FormControlComp** – standardstory

## Källa

- Implementation: [@sk-web-gui/forms](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms)
- Storybook: [RadioButton](https://stilguide.sundsvall.se/?path=/docs/komponenter-radiobutton--dokumentation)


---

# Select

> Select – komponent från @sk-web-gui/forms.

URL: https://ui.sundsvall.dev/komponenter/select/
Källa (markdown): https://ui.sundsvall.dev/komponenter/select.md

{/* AUTO-GENERATED från @sk-web-gui/forms@2.9.2. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`Select` finns i [`@sk-web-gui/forms`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { Select } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `Component` | `typeof InternalSelect` | `–` |  |
| `Option` | `typeof Option` | `–` |  |
| `Optgroup` | `typeof Optgroup` | `–` |  |




## Standardargs (från Meta.args)

```json
{
  "variant": "primary"
}
```

## Storyvarianter

- **Template** – standardstory
- **Inaktiverad** – standardstory
- **Invaliderad** – standardstory
- **Storlekar** – standardstory
- **Grupp** – standardstory

## Källa

- Implementation: [@sk-web-gui/forms](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms)
- Storybook: [Select](https://stilguide.sundsvall.se/?path=/docs/komponenter-select--dokumentation)


---

# Spinner

> Spinner – komponent från @sk-web-gui/spinner.

URL: https://ui.sundsvall.dev/komponenter/spinner/
Källa (markdown): https://ui.sundsvall.dev/komponenter/spinner.md

{/* AUTO-GENERATED från @sk-web-gui/spinner@1.1.9. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`Spinner` finns i [`@sk-web-gui/spinner`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/spinner). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { Spinner } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `size` | `number` | `–` | Set size of the spinner in rem @default 4 |
| `color` | `'tertiary' \| 'vattjom' \| 'gronsta' \| 'bjornstigen' \| 'juniskar' \| 'warning' \| 'info' \| 'success' \| 'error'` | `–` | Set color of the spinner @default tertiary |




## Storyvarianter

- **Template** – standardstory

## Källa

- Implementation: [@sk-web-gui/spinner](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/spinner)
- Storybook: [Spinner](https://stilguide.sundsvall.se/?path=/docs/komponenter-spinner--dokumentation)


---

# Switch

> Switch – komponent från @sk-web-gui/forms.

URL: https://ui.sundsvall.dev/komponenter/switch/
Källa (markdown): https://ui.sundsvall.dev/komponenter/switch.md

{/* AUTO-GENERATED från @sk-web-gui/forms@2.9.2. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`Switch` finns i [`@sk-web-gui/forms`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { Switch } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `color` | `'tertiary' \| 'gronsta'` | `–` | Set the switch color @default tertiary |




## Standardargs (från Meta.args)

```json
{
  "disabled": false
}
```

## Storyvarianter

- **Template** – standardstory
- **WithForm** – standardstory

## Källa

- Implementation: [@sk-web-gui/forms](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms)
- Storybook: [Switch](https://stilguide.sundsvall.se/?path=/docs/komponenter-switch--dokumentation)


---

# Textarea

> Textarea – komponent från @sk-web-gui/forms.

URL: https://ui.sundsvall.dev/komponenter/textarea/
Källa (markdown): https://ui.sundsvall.dev/komponenter/textarea.md

{/* AUTO-GENERATED från @sk-web-gui/forms@2.9.2. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`Textarea` finns i [`@sk-web-gui/forms`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { Textarea } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `showCount` | `boolean` | `–` |  |
| `maxLength` | `number` | `–` |  |
| `maxLengthWarningText` | `string` | `–` |  |




## Storyvarianter

- **Template** – standardstory
- **Disabled** – standardstory
- **Readonly** – standardstory
- **Invalid** – standardstory
- **Counter** – standardstory
- **WithUseForm** – standardstory
- **TextareaGroup** – standardstory

## Källa

- Implementation: [@sk-web-gui/forms](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms)
- Storybook: [Textarea](https://stilguide.sundsvall.se/?path=/docs/komponenter-textarea--dokumentation)


---

# TextField

> TextField – komponent från @sk-web-gui/forms.

URL: https://ui.sundsvall.dev/komponenter/textfield/
Källa (markdown): https://ui.sundsvall.dev/komponenter/textfield.md

{/* AUTO-GENERATED från @sk-web-gui/forms@2.9.2. Manuella ändringar skrivs över vid nästa sync. */}

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" title="Källa">
`TextField` finns i [`@sk-web-gui/forms`](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms). Den exponeras också via paraply-paketet [`@sk-web-gui/react`](https://www.npmjs.com/package/@sk-web-gui/react).
</Aside>

## Installation

```bash
npm install @sk-web-gui/react
```

## Användning

```tsx
import { TextField } from '@sk-web-gui/react';
```

## API

| Prop | Typ | Standard | Beskrivning |
|------|-----|----------|-------------|
| `type` | `'text' \| 'email' \| 'password' \| 'url'` | `–` |  |




## Standardargs (från Meta.args)

```json
{
  "placeholder": "Textfält"
}
```

## Storyvarianter

- **Template** – standardstory
- **Disabled** – standardstory
- **Readonly** – standardstory
- **Invalid** – standardstory
- **Storlekar** – standardstory
- **Addin** – standardstory

## Källa

- Implementation: [@sk-web-gui/forms](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/forms)
- Storybook: [TextField](https://stilguide.sundsvall.se/?path=/docs/komponenter-textfield--dokumentation)


---

# Översikt

> Hur designtokens fungerar i Sundsvalls designsystem. Värdena hämtas live från @sk-web-gui/theme och kompileras till CSS-variabler.

URL: https://ui.sundsvall.dev/tokens/oversikt/
Källa (markdown): https://ui.sundsvall.dev/tokens/oversikt.md

Sundsvalls designsystem definierar alla visuella värden – färger, typografi, avstånd, hörnradier, breakpoints – som **designtokens**. Tokens är källan till sanning. **Aldrig hårdkoda färg eller storlek**, alltid använd CSS-variabel eller Tailwind-klass.

## Hur portalen läser tokens

Den här portalen importerar tokens från npm-paketet `@sk-web-gui/theme` vid sync, konverterar till W3C Design Tokens-format i `tokens-src/*.json`, och kompilerar till `src/styles/tokens.css` via [Style Dictionary](https://styledictionary.com/). Resultatet är CSS-variabler i `:root`.

## CSS-variabelnamn

Mönstret är `--<kategori>-<grupp>-<nyans>`:

| Mönster                                            | Exempel                                                 |
|----------------------------------------------------|---------------------------------------------------------|
| `--color-primitives-<kulör>-<steg>`                | `--color-primitives-blue-700` → `#005595`                |
| `--color-light-<tema>-<roll>-<variant>`            | `--color-light-vattjom-surface-primary-default`          |
| `--color-dark-<tema>-<roll>-<variant>`             | `--color-dark-vattjom-text-default`                      |
| `--font-family-<stack>`                            | `--font-family-header` → `Raleway, Arial, ...`           |
| `--font-size-<kategori>-<step>`                    | `--font-size-h-1-default` → `4rem`                       |
| `--space-<n>`                                      | `--space-16` → `1.6rem`                                  |
| `--radius-<roll>`                                  | `--radius-button-md` → `1.2rem`                          |

## I React-kod

Med `@sk-web-gui/react` får du tokens via komponent-props:

```tsx
import { Button } from '@sk-web-gui/react';

<Button color="vattjom" variant="primary">Skicka</Button>
<Button color="gronsta" variant="secondary">Spara</Button>
```

Eller via Tailwind (paketet `@sk-web-gui/core` exponerar en preset):

```html
<div class="bg-vattjom-surface-primary text-vattjom-text-DEFAULT p-4 rounded-button">
  ...
</div>
```

## Mer

- **[Färger](/identitet/farger/)** – fullständig palett inkl. de fyra varumärkesteman
- **[Typografi](/identitet/typografi/)** – Raleway + Arial, semantiska storlekar
- Source code: [packages/theme](https://github.com/Sundsvallskommun/web-shared-components/tree/main/packages/theme)