Form

<sl-form> | SlForm

Since 3.4.0

experimental

Adds some basic form value transformation for further use.

<sl-form>
	<form>
		<sl-input name="myText" label="my text"></sl-input>
		<sl-select name="mySelection" label="my selection">
			<sl-option value="option1">Option 1</sl-option>
			<sl-option value="option2">Option 2</sl-option>
		</sl-select>
		<sl-button-row>
			<sl-button type="submit" disabled>submit</sl-button>
		</sl-button-row>
	</form>
</sl-form>

import SlForm from '@yoummday/ymmd-shoelace/dist/react/form';

const App = () => <SlForm />;

Examples

With labels left

Use the optional layout attribute/property to set the labels’ positions. Available values: column. Omit layout for a default form style with labels above their fields.

<sl-form layout="column">
	<form>
		<sl-input name="myText" label="my text" value="cool stuff"></sl-input>
		<sl-select name="mySelection" label="my selection" value="option1">
			<sl-option value="option1">Option 1</sl-option>
			<sl-option value="option2">Option 2</sl-option>
		</sl-select>
		<sl-button-row>
			<sl-button type="submit" disabled>submit</sl-button>
		</sl-button-row>
	</form>
</sl-form>

Json

Use the json-submit custom event to get formdata in a valid JSON format.

Football

Tennis

Basketball

Cat

Dog

Hamster

Meat

Fish

Carrots

Rice

Cat

Dog

Hamster

Meat

Fish

Carrots

Rice

male

female

other

Polio

Covid

Insurance

submit

<sl-form class="json-submit" layout="column">
	<form>
		<sl-input type="text" name="name" label="Name" value="John Doe"></sl-input>
      <sl-input type="text" name="address[city]" label="City" value="Berlin"></sl-input>
      <sl-input type="text" name="address[street]" label="Street" value="Alexanderplatz"></sl-input>
      <sl-input type="number" name="address[houseNumber]" label="Housenumber" value="12"></sl-input>
      <sl-select name="hobbies[]" label="Hobbies" multiple value="football tennis">
        <sl-option value="football"> Football </sl-option>
        <sl-option value="tennis"> Tennis </sl-option>
        <sl-option value="basketball">Basketball</sl-option>
      </sl-select>
      <sl-input type="text" name="pets[0][name]" label="Name" value="Danny"></sl-input>
      <sl-select name="pets[0][animal]"  label="Animal" value="cat">
        <sl-option value="cat"> Cat </sl-option>
        <sl-option value="dog">Dog</sl-option>
        <sl-option value="hamster">Hamster</sl-option>
      </sl-select>
      <sl-select name="pets[0][food][]" label="Food" multiple value="meat fish">
        <sl-option value="meat"> Meat </sl-option>
        <sl-option value="fish"> Fish </sl-option>
        <sl-option value="carrots">Carrots</sl-option>
        <sl-option value="rice">Rice</sl-option>
      </sl-select>
      <sl-input type="text" name="pets[1][name]" label="Name" value="Mandy"></sl-input>
      <sl-select name="pets[1][animal]" label="Animal" value="dog">
        <sl-option value="cat">Cat</sl-option>
        <sl-option value="dog"> Dog </sl-option>
        <sl-option value="hamster">Hamster</sl-option>
      </sl-select>
      <sl-select name="pets[1][food][]" label="Food" multiple value="meat fish rice">
        <sl-option value="meat"> Meat </sl-option>
        <sl-option value="fish"> Fish </sl-option>
        <sl-option value="carrots">Carrots</sl-option>
        <sl-option value="rice"> Rice </sl-option>
      </sl-select>
			<sl-range label="Age" min="0" max="10" value="7" name="age"></sl-range>
			<sl-radio-group label="Gender" name="gender" value="male">
				<sl-radio value="male">male</sl-radio>
				<sl-radio value="female">female</sl-radio>
				<sl-radio value="other">other</sl-radio>
			</sl-radio-group>
			<sl-checkbox-group label="Vaccines" name="vaccines[]">
				<sl-checkbox value="polio" checked>Polio</sl-checkbox>
				<sl-checkbox value="covid" checked>Covid</sl-checkbox>
			</sl-checkbox-group>
			<sl-switch name="insurance">Insurance</sl-switch>
		<sl-button-row>
			<sl-button type="submit">submit</sl-button>
		</sl-button-row>
	</form>
	<pre></pre>
</sl-form>

<script>
  const form = document.querySelector('.json-submit');
	const output = form.getElementsByTagName('pre')[0];
  form.addEventListener('sl-json-submit', (e) => output.textContent = JSON.stringify( e.detail, undefined, 2));
</script>

FormData

Use the formdata-submit custom event to get formdata in a valid JSON format.

<sl-form class="formdata-submit">
	<form>
		<sl-input name="myText" label="my text" value="cool stuff"></sl-input>
		<sl-select name="mySelection" label="my selection" value="option1">
			<sl-option value="option1">Option 1</sl-option>
			<sl-option value="option2">Option 2</sl-option>
		</sl-select>
		<sl-button-row>
			<sl-button type="submit">submit</sl-button>
		</sl-button-row>
	</form>
	<pre></pre>
</sl-form>

<script>
  const form = document.querySelector('.formdata-submit');
	const output = form.getElementsByTagName('pre')[0];
  form.addEventListener('sl-formdata-submit', (e) => output.textContent = JSON.stringify( e.detail, undefined, 2));
</script>

Query-String

Use the query-string-submit custom event to get formdata in a valid JSON format.

<sl-form class="querystring-submit">
	<form>
		<sl-input name="myText" label="my text" value="cool stuff"></sl-input>
		<sl-select name="mySelection" label="my selection" value="option1 option2" multiple>
			<sl-option value="option1">Option 1</sl-option>
			<sl-option value="option2">Option 2</sl-option>
		</sl-select>
		<sl-button-row>
			<sl-button type="submit">submit</sl-button>
		</sl-button-row>
	</form>
	<pre></pre>
</sl-form>

<script>
  const form = document.querySelector('.querystring-submit');
  const output = form.getElementsByTagName('pre')[0];
  form.addEventListener('sl-querystring-submit', (e) => output.textContent = JSON.stringify( e.detail, undefined, 2));
</script>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://v3-5-1.yoummday-theme.pages.dev/components/form/form.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://v3-5-1.yoummday-theme.pages.dev/components/form/form.js';

To import this component using a bundler:

import '@yoummday/ymmd-shoelace/dist/components/form/form.js';

To import this component as a React component:

import SlForm from '@yoummday/ymmd-shoelace/dist/react/form';

Events

Name	React Event	Description	Event Detail
`sl-json-submit`	`onSlJsonSubmit`	Emitted on form submission, includes data as json.	-
`sl-formdata-submit`	`onSlFormdataSubmit`	Emitted on form submission, includes data as formdata object.	-
`sl-querystring-submit`	`onSlQuerystringSubmit`	Emitted on form submission, includes data as queryString.	-

Learn more about events.