Skip to main content

Form Components Ready

This template shows how to use the different form components that Duet provides. Please note that the example below does not represent a real use case.

Hint: Press F on your keyboard to view both templates and components in fullscreen and ESC to exit the fullscreen mode. You can also open the template in a new browser window.

Open in new window
<!DOCTYPE html>
<html class="duet-bg-gradient duet-sticky-footer" lang="fi">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="" integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq" crossorigin="anonymous" />
<link rel="stylesheet" href="" integrity="sha384-wDs2jncW8Cx05wCmC63VPWf+LNs6zl5HoVGzkWKyrvLzkOkoly9PEA6YKluhz/01" crossorigin="anonymous" />
<link rel="stylesheet" href="" integrity="sha384-7+5ZzVlpstuRULythk9AjF5A5RTVVm+QM/dzBlKwfAy7IknFG9yq5pMPypcvJHBD" crossorigin="anonymous" />
<script type="module" src="" integrity="sha384-eG4qKthuSEwQVkC5ibCytRvztDjTpxz9F1Vww4uQwXheghN2GJwtYpIIZvZJhDpl" crossorigin="anonymous"></script>
<script nomodule src="" integrity="sha384-EIBBbDpu70LtskytP53zG/25bD7QBqTBq3DoXpcxeBgLKXFrEtaVbnKiDswCBlYe" crossorigin="anonymous"></script>
<duet-header language="fi" skip-to-id="#content" contact="Ota yhteyttä" current-href="/vakuutukset/"></duet-header>
<duet-layout sticky id="content">
<div slot="main">
<duet-card padding="large">
<duet-spacer breakpoint="x-small" size="medium"></duet-spacer>
<form action="#" novalidate>
<duet-heading level="h1" visual-level="h2">Ota yhteyttä</duet-heading>
Lähetä meille viesti kun olet muuttamassa, haluat antaa palautetta tai pyytää
yhteydenottoa. Jos olet jo asiakkaamme, asiasi hoituu parhaiten, kun kirjaudut
<duet-spacer size="medium"></duet-spacer>
<duet-choice-group value="one" label="Asiointikieli" direction="horizontal" name="group" responsive>
<duet-choice label="Suomi" type="radio" value="one" expand></duet-choice>
<duet-choice label="Svenska" type="radio" value="two" expand></duet-choice>
<duet-choice label="English" type="radio" value="three" expand></duet-choice>
<duet-grid responsive>
<duet-input label="Etunimi" name="first name" placeholder="Matti" expand required>
<duet-input label="Sukunimi" name="last name" placeholder="Meikäläinen" expand required>
placeholder="Kadunnimi 1 A 2"
tooltip="Hello, I’m a tooltip! To close me, you can click outside of
the tooltip or hit ESC key."


<duet-select label="Kaupunki" name="city" placeholder="Valitse" expand></duet-select>
<duet-range-slider label="Sijoitettava pääoma" value="3000" min="100" max="10000" step="100" unit="" expand>
<duet-grid responsive>
<duet-input label="Postinumero" name="zip" value="96100" expand disabled>
<duet-input label="Postitoimipaikka" name="city" value="Rovaniemi" expand disabled>
<duet-toggle label="Hyväksyn ehdot" identifier="toggle" checked></duet-toggle>
<duet-number-input label="Korvattava summa" value="100000" min="50000" max="500000" step="5000" unit="" expand>
<duet-input label="Puhelinnumero" name="phone" type="tel" placeholder="+358" required expand>
<duet-input label="Sähköposti" name="email" type="email" placeholder="" required expand>
label="Viesti asiakaspalveluun"
placeholder="Kirjoita tähän"
tooltip="Hello, I’m a tooltip! To close me, you can click outside
of the tooltip, hit ESC key or click the X button."


<duet-radio-group responsive label="Yhteydenoton syy" direction="horizontal" value="one" name="group1">
<duet-radio label="Tarvitsen apua" value="one"></duet-radio>
<duet-radio label="Ongelma" value="two"></duet-radio>
<duet-radio label="Kysymys" value="three"></duet-radio>
<duet-fieldset label="Haluatko viestin myös sähköpostiisi?">
<duet-checkbox label="Kyllä" checked></duet-checkbox>
<duet-spacer size="x-large"></duet-spacer>
<duet-button variation="primary" submit>Lähetä viesti</duet-button>
<div slot="sidebar">
<duet-card padding="large" heading="Sivupalsta">
Sivupalstaa voidaan käyttää pääsisältöön liittyvän tiedon näyttämiseen
tai vaihtoehtoisesti nostamaan esiin aiheeseen liittyvää muuta sisältöä.
<duet-footer logo-href="#" language="fi"></duet-footer>
// Save references to components we want to adjust below
var header = document.querySelector("duet-header")
var footer = document.querySelector("duet-footer")
var select = document.querySelector("duet-select")

// Set the header main navigation items
header.items = [
{ label: 'Etusivu', href: '#' },
{ label: 'Vakuutukset', href: '/vakuutukset/' },
{ label: 'Vahinkoasiat', href: '#' },
{ label: 'Säästöt ja sijoitukset', href: '#' },
{ label: 'Laskut', href: '#', badge: true },
{ label: 'Viestit', href: '#' }

// Set the contact menu items
header.contactItems = [
{ label: "Lähetä viesti", href: "/viestit/laheta" },
{ label: "Avaa chat", href: "/chat/" },
{ label: "Yhteystiedot", href: "/yhteystiedot/" }

// Set the language menu items
header.languageItems = [
{ label: "Suomeksi", country: "fi", href: "/?lang=fi" },
{ label: "På Svenska", country: "sv", href: "/?lang=sv" },
{ label: "In English", country: "en", href: "/?lang=en" }

// Set label and href for session link
header.session = {
label: "Kirjaudu ulos",
href: "/?logout",
type: "logout"

// Set label and href for user profile link
header.user = {
label: "Laura",
href: "/?userId=1234"

// prevent header links causing a navigation
function preventDefault(e) {

header.addEventListener("duetSessionClick", preventDefault)
header.addEventListener("duetUserClick", preventDefault)
header.addEventListener("duetLanguageSelect", preventDefault)
header.addEventListener("duetLogoClick", preventDefault)
header.addEventListener("duetContactClick", preventDefault)
header.addEventListener("duetItemClick", preventDefault)

// Set the main links in footer
footer.items = [
{ label: 'Hae korvausta', href: '#', icon: 'navigation-make-claim' },
{ label: 'Osta vakuutus', href: '#', icon: 'action-buy-insurance' },
{ label: 'Yhteystiedot', href: '#', icon: 'form-tel' }

// Set the help menu items in footer = [
{ label: 'Turvallisuus ja käyttöehdot', href: '#' },
{ label: 'Evästeet', href: '#' },
{ label: 'Henkilötietojen käsittely', href: '#', external: true },

// Set select menu items and their values
select.items = [
{ label: "Helsinki", value: "1" },
{ label: "Tampere", value: "2" },
{ label: "Vantaa", value: "3" },
{ label: "Espoo", value: "4" }


To install this template’s dependencies into your project, run:

npm install @duetds/components
npm install @duetds/css
npm install @duetds/fonts

For further guidelines, please see each package’s documentation.


Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:


Building Layouts


Using CLI Tools


Creating Custom Patterns


Server Side Rendering


Sharing Prototypes


Usage With Markdown


If you experience any issues while using a template, please head over to the Support page for more guidelines and help.