@gov-design-system-ce/components 4.0.5 → 4.0.6-alpha.2

package/dist/collection/pages/Forms.js

@@ -0,0 +1,1584 @@
+const removeDiacritics = (string) => {
+  if (!string)
+    return string;
+  return string.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+};
+const randomNumber = (min, max) => {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+const data = () => [
+  { name: 'Pepa' },
+  { name: 'Katak' },
+  { name: 'Tomáš' },
+  { name: 'Ludvík' },
+  { name: 'Anežda' },
+  { name: 'Xaviér' },
+  { name: 'Ondřej' },
+  { name: 'Mirek' },
+  { name: 'Zdeněk' },
+  { name: 'Monika' },
+  { name: 'Jirka' },
+  { name: 'Abrahám' },
+  { name: 'Lucie' },
+  { name: 'Emily' },
+  { name: 'Pavel' },
+  { name: 'Gustav' },
+  { name: 'Amálie' },
+];
+class FormsPage extends HTMLElement {
+  connectedCallback() {
+    ;
+    (() => {
+      setTimeout(() => {
+        const selectedList = document.getElementById('selected');
+        const moja = document.getElementById('moja');
+        const da = document.getElementById('test-me-ujo');
+        const po = document.getElementById('bagr');
+        const ba = document.getElementById('ba');
+        const na = document.getElementById('kaprWWWWWW');
+        const ms = document.getElementById('poleno');
+        if (ba) {
+          ba.addEventListener('gov-change', function (e) {
+            console.log(e);
+          });
+        }
+        if (na) {
+          na.addEventListener('gov-blur', function (e) {
+            console.log(e);
+          });
+        }
+        if (da) {
+          console.log(da);
+          da.addEventListener('gov-add-file', function (e) {
+            console.log(e.detail);
+          });
+        }
+        if (po) {
+          po.addEventListener('gov-select', function (e) {
+            console.log(e);
+          });
+          po.setSearchCallback(val => {
+            return new Promise(resolve => {
+              setTimeout(() => {
+                resolve(data().filter(({ name }) => {
+                  if (!name)
+                    return false;
+                  return removeDiacritics(name).toLowerCase().indexOf(removeDiacritics(val).toLowerCase()) > -1;
+                }));
+              }, randomNumber(100, 1000));
+            });
+          });
+        }
+        if (ms && selectedList) {
+          ms.addEventListener('gov-change', (e) => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            e.detail.value.map((item) => {
+              const cta = document.createElement('button');
+              cta.innerHTML = item.name;
+              cta.addEventListener('click', () => {
+                ms.setSelectedOptions([{ value: 'a', name: 'Aneta' }]);
+              });
+              selectedList.appendChild(cta);
+            });
+          });
+          ms.setOptions([{ value: 'a', name: 'Aneta' }, { value: 'b', name: 'Beata' }, { value: 't', name: 'Tomáš' }]);
+          setTimeout(() => {
+            //ms.setSelectedOption({value: 'a', name: 'Aneta'})
+            //ms.setSelectedOptions([{value: 'a', name: 'Aneta'}])
+            //console.log('sets');
+            //ms.getSelectedOptions().then((t) => console.log(t))
+          }, 5000);
+        }
+        if (moja) {
+          moja.setOptions([{ value: 'd', label: 'Value D' }, { value: 'e', label: 'Value E' }, {
+              value: 'f',
+              label: 'Value F',
+              disabled: true
+            }]);
+          setTimeout(() => {
+            moja.value = 'h';
+            moja.setOptions([{ value: 'g', label: 'Value G' }, { value: 'h', label: 'Value H' }, {
+                value: 'i',
+                label: 'Value I',
+              }]);
+          }, 2000);
+        }
+        const mojeId = document.getElementById('moje-id');
+        const input = document.createElement('gov-form-input');
+        input.setAttribute('size', 'l');
+        input.setAttribute('placeholder', 'Co hledáte HYDRATED?');
+        input.addEventListener('gov-hydrated', () => {
+          console.log('hydrated');
+        });
+        mojeId.prepend(input);
+      }, 1000);
+    })();
+    this.innerHTML = `
+
+
+<div id="selected" style="border: 1px solid blue"></div>
+<div id="moje-id"></div>
+
+			<gov-form-control>
+				<gov-form-label size="m" slot="top">Multiselect</gov-form-label>
+				<gov-form-group>
+					<gov-form-multi-select name="test-me" size="xl" id="poleno">
+					</gov-form-multi-select>
+				</gov-form-group>
+			</gov-form-control>
+
+			<gov-form-control>
+				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select  value="e" name="test-me" size="xl" id="moja">
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<h2>
+				Samostatné použití
+			</h2>
+			<gov-form-input placeholder="Co hledáte" variant="primary">
+				<gov-icon slot="right-icon" name="info"></gov-icon>
+			</gov-form-input>
+			<br>
+			<gov-form-select size="l" name="test-me" invalid="true">
+				<option value="" selected>Placeholder</option>
+				<option value="b">Value B</option>
+				<option value="c">Value C</option>
+				<option value="d">Value D</option>
+			</gov-form-select>
+			<br>
+			<gov-form-select size="l" name="test-me" success="true">
+				<option value="" selected>Placeholder</option>
+				<option value="b">Value B</option>
+				<option value="c">Value C</option>
+				<option value="d">Value D</option>
+			</gov-form-select>
+			<br>
+			<gov-form-multi-select size="xl" id="ba" placeholder="Placeholder" wcag-described-by="me-and-you">
+				<option value>Placeholder</option>
+				<option value="b">Value B</option>
+				<option value="c">Value C</option>
+				<option value="d" selected>Value D</option>
+				<option value="e">Value E</option>
+				<option value="f">Value F</option>
+				<option value="g">Value G</option>
+				<option value="h">Value H</option>
+				<option value="i" selected>Value I</option>
+			</gov-form-multi-select>
+			<br>
+			<gov-form-multi-select size="xl" id="ba" placeholder="Placeholder" wcag-described-by="me-and-you" invalid="true">
+				<option value>Placeholder</option>
+				<option value="b">Value B</option>
+				<option value="c">Value C</option>
+				<option value="d" selected>Value D</option>
+				<option value="e">Value E</option>
+				<option value="f">Value F</option>
+				<option value="g">Value G</option>
+				<option value="h">Value H</option>
+				<option value="i" selected>Value I</option>
+			</gov-form-multi-select>
+			<br>
+			<gov-form-multi-select size="xl" id="ba" placeholder="Placeholder" wcag-described-by="me-and-you" success="true">
+				<option value>Placeholder</option>
+				<option value="b">Value B</option>
+				<option value="c">Value C</option>
+				<option value="d" selected>Value D</option>
+				<option value="e">Value E</option>
+				<option value="f">Value F</option>
+				<option value="g">Value G</option>
+				<option value="h">Value H</option>
+				<option value="i" selected>Value I</option>
+			</gov-form-multi-select>
+			<br>
+			<gov-form-checkbox name="test-me-c" value="me" checked no-label></gov-form-checkbox>
+			<gov-form-radio name="superRadio2" value="me1" no-label></gov-form-radio>
+			<br>
+			<gov-form-radio name="superRadio2" value="me2" checked no-label></gov-form-radio>
+			<gov-form-switch name="test-me" value="me2" checked no-label></gov-form-switch>
+			<gov-form-checkbox name="test-me-c" value="me" checked>
+				<gov-form-label slot="label">Souhlasím</gov-form-label>
+			</gov-form-checkbox>
+			<gov-form-radio name="superRadio" value="me1">
+				<gov-form-label slot="label">Souhlasím</gov-form-label>
+			</gov-form-radio>
+			<gov-form-radio name="superRadio" value="me2" checked>
+				<gov-form-label slot="label">Souhlasím</gov-form-label>
+			</gov-form-radio>
+			<gov-form-switch name="test-me" value="me2" checked>
+				<gov-form-label slot="label">Souhlasím</gov-form-label>
+			</gov-form-switch>
+
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
+			<h2>
+				Date & Time input (nativní)
+			</h2>
+			<gov-form-input size="m" placeholder="Co hledáte" input-type="datetime-local"></gov-form-input>
+			<br>
+			<gov-form-input size="l" placeholder="Co hledáte" input-type="date"></gov-form-input>
+			<br>
+			<gov-form-input size="xl" placeholder="Co hledáte" input-type="time"></gov-form-input>
+
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
+			<h2>Search</h2>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-search name="test-me-c" value="me" variant="secondary">
+						<gov-form-input slot="input" id="kapr" name="test-me" size="m" variant="secondary" placeholder="Co hledáte"></gov-form-input>
+						<gov-button slot="button" variant="primary" size="m" type="solid">
+							<gov-icon slot="left-icon" name="search"></gov-icon>
+						</gov-button>
+					</gov-form-search>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-search name="test-me-c" value="me" variant="primary">
+						<gov-form-input slot="input" id="kapr" name="test-me" size="l" variant="secondary" placeholder="Co hledáte"></gov-form-input>
+						<gov-button slot="button" variant="primary" size="l" type="solid">
+							Hledat
+						</gov-button>
+					</gov-form-search>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-search name="test-me-c" value="me"checked variant="secondary">
+						<gov-form-input slot="input" id="kapr" size="xl" variant="secondary" name="test-me" placeholder="Co hledáte"></gov-form-input>
+						<gov-button slot="button" variant="secondary" size="xl" type="solid">
+							Hledat
+						</gov-button>
+					</gov-form-search>
+				</gov-form-group>
+			</gov-form-control>
+
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
+			<h2>File</h2>
+			<div class="container-view">
+			<h3>Normal 2</h3>
+				<gov-form-control>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file id="test-me-ujo" multiple accept=".pdf,.jpg,.png,.jpeg" max-file-size="616448">
+							<p>
+								<gov-button variant="primary" type="outlined" tabindex="-1">
+									Nahrát soubor ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+				</gov-form-control>
+				<br>
+				<gov-form-control>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file name="test-me-c">
+							<p aria-hidden="true">
+								<gov-button variant="primary" type="outlined">
+									<gov-icon slot="left-icon" name="upload"></gov-icon>
+									Nahrát soubor ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+				</gov-form-control>
+				<br>
+				<gov-form-control>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file name="test-me-c" invalid>
+							<p>
+								<gov-button variant="primary" type="outlined">
+									<gov-icon slot="left-icon" name="upload"></gov-icon>
+									Nahrát soubor ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+					<gov-form-message slot="bottom" variant="error">
+						<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+						Required
+					</gov-form-message>
+				</gov-form-control>
+				<br>
+
+				<h3>Expanded</h3>
+				<gov-form-control>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file expanded name="test-me-c">
+							<p>
+								Přetáhněte soubor nebo
+							</p>
+							<p>
+								<gov-button variant="primary" type="outlined">
+									Nahrajte ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+				</gov-form-control>
+				<br>
+				<gov-form-control disabled>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file expanded name="test-me-c" disabled>
+							<p>
+								Přetáhněte soubor nebo
+							</p>
+							<p>
+								<gov-button disabled variant="primary" type="outlined">
+									Nahrát ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+				</gov-form-control>
+				<br>
+				<gov-form-control invalid>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file expanded name="test-me-c" invalid>
+							<p>
+								Přetáhněte soubor nebo
+							</p>
+							<p>
+								<gov-button variant="primary" type="outlined">
+									Nahrát ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+					<gov-form-message slot="bottom" variant="error">
+						<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+						Required
+					</gov-form-message>
+				</gov-form-control>
+				<br>
+			</div>
+
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
+			<h2>Multiselect</h2>
+			<gov-form-control>
+				<gov-form-label slot="top">Multiselect</gov-form-label>
+				<gov-form-group>
+					<gov-form-multi-select id="ba" placeholder="Placeholder" wcag-described-by="me-and-you">
+						<option value>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d" selected>Value D</option>
+						<option value="e">Value E</option>
+						<option value="f">Value F</option>
+						<option value="g">Value G</option>
+						<option value="h">Value H</option>
+						<option value="i" selected>Value I</option>
+					</gov-form-multi-select>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
+			<h2>Autocomplete</h2>
+			<gov-form-control>
+				<gov-form-label slot="top">Label of autocomplete</gov-form-label>
+				<gov-form-group>
+					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr">
+						<gov-icon name="search" slot="right-icon" />
+					</gov-form-autocomplete>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label slot="top">Label of autocomplete</gov-form-label>
+				<gov-form-group>
+					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr" invalid="true">
+						<gov-icon name="search" slot="right-icon" />
+					</gov-form-autocomplete>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control success="true">
+				<gov-form-label slot="top">Label of autocomplete</gov-form-label>
+				<gov-form-group>
+					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr" success="true">
+						<gov-icon name="search" slot="right-icon" />
+					</gov-form-autocomplete>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label slot="top">Label of autocomplete</gov-form-label>
+				<gov-form-group>
+					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr" disabled="true">
+						<gov-icon name="search" slot="right-icon" />
+					</gov-form-autocomplete>
+				</gov-form-group>
+			</gov-form-control>
+
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
+			<h2>Textarea</h2>
+			<h3>
+				Default
+			</h3>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
+				<gov-form-group>
+					<gov-form-input multiline rows="3" name="test-me" placeholder="Placeholder">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Invalid
+			</h3>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
+				<gov-form-group>
+					<gov-form-input required multiline rows="3" name="test-me" value="Value of textarea" invalid="TRUE"></gov-form-input>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+
+			<h3>
+				Disabled
+			</h3>
+			<gov-form-control id="metro2">
+				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
+				<gov-form-group>
+					<gov-form-input multiline rows="3" name="test-me" disabled value="Value of textarea"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
+			<h2>Checkbox</h2>
+			<h3>
+				Gaps
+			</h3>
+			<gov-form-control>
+				<gov-form-label size="xs" slot="top">Label of word</gov-form-label>
+				<gov-form-group gap="2xs">
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" checked></gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" checked></gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group gap="2xs">
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" required checked>
+						<gov-form-label slot="label">Option 1</gov-form-label>
+					</gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" checked>
+						<gov-form-label slot="label">Option 2</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group gap="xs">
+					<gov-form-checkbox name="test-me-c" value="me" size="s" checked>
+						<gov-form-label slot="label">Option 1</gov-form-label>
+					</gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" size="s" checked>
+						<gov-form-label slot="label">Option 2</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group gap="s">
+					<gov-form-checkbox name="test-me-c" value="me" size="m" checked>
+						<gov-form-label slot="label">Option 1</gov-form-label>
+					</gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" size="m" checked>
+						<gov-form-label slot="label">Option 2</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group gap="m">
+					<gov-form-checkbox name="test-me-c" value="me" size="l" checked>
+						<gov-form-label slot="label">Option 1</gov-form-label>
+					</gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" size="l" checked>
+						<gov-form-label slot="label">Option 2</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Default
+			</h3>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" size="s" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" size="m" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" size="l" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Invalid
+			</h3>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" checked invalid="true">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" size="s" checked invalid="true">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" size="m" checked invalid="true">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+
+			<h3>
+				Disabled
+			</h3>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" disabled>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" size="s" disabled="True">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" size="m" checked disabled="TRUE">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" size="l" checked disabled="1">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
+			<h2>Radio</h2>
+			<h3>
+				Default group
+			</h3>
+			<gov-form-control fieldset>
+					<gov-form-label legend size="s" slot="top">Seznam skupiny</gov-form-label>
+				<gov-form-group>
+					<gov-form-radio name="test1" value="me" size="xs">
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test1" value="me2" size="xs" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-radio name="test2" value="me" size="s">
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test2" value="me2" size="s" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-radio name="test3" value="me" size="m">
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test3" value="me2" size="m" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-radio name="test4" value="me" size="l">
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test4" value="me2" size="l" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Invalid
+			</h3>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-radio name="test5" value="me" size="xs" invalid="true">
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test5" value="me2" size="xs" checked invalid="true">
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-radio name="test6" value="me" size="s" invalid="true">
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test6" value="me2" size="s" checked invalid="true">
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-radio name="test7" value="me" size="m" invalid="true">
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test7" value="me2" size="m" checked invalid="true">
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-radio name="test8" value="me" size="l" invalid="true">
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test8" value="me2" size="l" checked invalid="true">
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+
+			<h3>
+				Disabled
+			</h3>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-radio name="test9" value="me" size="xs" disabled>
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test9" value="me2" size="xs" checked disabled>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-radio name="test10" value="me" size="s" disabled="true">
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test10" value="me2" size="s" checked disabled="true">
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-radio name="test11" value="me" size="m" disabled="true">
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test11" value="me2" size="m" checked disabled="true">
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-radio name="test12" value="me" size="l" disabled="true">
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test12" value="me2" size="l" checked disabled="true">
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
+			<h2>Select</h2>
+			<h3>
+				Default
+			</h3>
+			<gov-form-control>
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="s">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="m">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="l">
+						<option value="a" selected>Value A</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="xl">
+						<option value="a" selected>Value A</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Prefix / sufix
+			</h3>
+			<gov-form-control>
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="s">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="m">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="l">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+						<option value="a" selected>Value A</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="l">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+						<option value="a" selected>Value A</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Success
+			</h3>
+			<gov-form-control success="true">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="s" success="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control success="true">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="m" success="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control success="true">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="l" success="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control success="true">
+				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="xl" success="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Invalid
+			</h3>
+			<gov-form-control>
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="s" invalid="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="m" invalid="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="l" invalid="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="xl" invalid="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+
+			<h3>
+				Disabled
+			</h3>
+			<gov-form-control>
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="s" disabled>
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="m" disabled>
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="m" disabled="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="l" disabled="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
+			<h2>Input</h2>
+			<h3>
+				Primary
+			</h3>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="primary" size="m"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input 3333</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" variant="primary" size="l"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" variant="primary" size="xl"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Secondary
+			</h3>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="secondary" size="s"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="secondary" size="m"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input 3333</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" variant="secondary" size="l"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" variant="secondary" size="xl"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Prefix / sufix
+			</h3>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s">
+						<p slot="prefix">$</p>
+						<p slot="sufix">Kč</p>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="m">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="l">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Left icon
+			</h3>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="l">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Right icon
+			</h3>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s">
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m">
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="l">
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Success
+			</h3>
+			<gov-form-control type="input" id="metro2" success="true">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2" success="true">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2" success="True">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="l">
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2" success="1">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Invalid
+			</h3>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s" invalid="true"></gov-form-input>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m" invalid="true"></gov-form-input>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="l" invalid="true">
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl" invalid="true">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+
+			<h3>
+				Disabled
+			</h3>
+			<gov-form-control size="m" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s" disabled>
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="m" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m" disabled>
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="l" disabled="True">
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl" disabled="1">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
+			<h3>
+				Password power
+			</h3>
+			<gov-form-password-power power="0"></gov-form-password-power>
+			<gov-form-password-power power="1">slabé</gov-form-password-power>
+			<gov-form-password-power power="2">střední</gov-form-password-power>
+			<gov-form-password-power power="3">silné</gov-form-password-power>
+
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
+			<h2>Switch</h2>
+			<h3>
+				Default
+			</h3>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="xs" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="s" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="m" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="l" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				With message
+			</h3>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="xs" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="s" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="m" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="l" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+
+			<h3>
+				With label
+			</h3>
+			<gov-form-control>
+				<gov-form-label size="s" slot="top">Label of toggle</gov-form-label>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="xs" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="s" slot="top">Label of toggle</gov-form-label>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="s" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="m" slot="top">Label of toggle</gov-form-label>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="m" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label size="m" slot="top">Label of toggle</gov-form-label>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="l" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Disabled
+			</h3>
+			<gov-form-control type="switch">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="xs" disabled>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="switch">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="s" disabled="true">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="switch">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="m" checked disabled="true">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="switch">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" size="l" checked disabled="true">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Invalid
+			</h3>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-switch invalid name="test-me" value="me" size="xs" invalid="True">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-switch invalid name="test-me" value="me" size="s" invalid="TRUE">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-switch invalid name="test-me" value="me" size="m" invalid="true" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-group>
+					<gov-form-switch invalid name="test-me" value="me" size="l" invalid="1" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+		`;
+  }
+}
+if (customElements.get('forms-page') === undefined) {
+  customElements.define('forms-page', FormsPage);
+}
+//# sourceMappingURL=Forms.js.map