js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(form): add reset functionality (#799)

Browse Source 
* feat(form): add reset functionality

* feat(interal): add defaultValue decorator

* feat: add defaultValue and defaultChecked

* chore: implement unit tests

* chore: remove leftover
This commit is contained in:
Alessandro
2022-06-28 23:59:52 +02:00
committed by GitHub
parent 0d19c46d18
commit b2cf3a5505
22 changed files with 468 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/getting-started/form-controls.md
View File

@@ -65,6 +65,7 @@ To make a field required, use the `required` prop. The form will not be submitte
<br />
<sl-checkbox required>Check me before submitting</sl-checkbox>
<br /><br />
<sl-button type="reset" variant="default">Reset</sl-button>
<sl-button type="submit" variant="primary">Submit</sl-button>
</form>
@@ -118,6 +119,7 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
<form class="input-validation-pattern">
<sl-input name="letters" required label="Letters" pattern="[A-Za-z]+"></sl-input>
<br />
<sl-button type="reset" variant="default">Reset</sl-button>
<sl-button type="submit" variant="primary">Submit</sl-button>
</form>
@@ -161,6 +163,7 @@ Some input types will automatically trigger constraints, such as `email` and `ur
<br />
<sl-input variant="url" label="URL" placeholder="https://example.com/" required></sl-input>
<br />
<sl-button type="reset" variant="default">Reset</sl-button>
<sl-button type="submit" variant="primary">Submit</sl-button>
</form>
@@ -204,6 +207,7 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa
<form class="input-validation-custom">
<sl-input label="Type 'shoelace'" required></sl-input>
<br />
<sl-button type="reset" variant="default">Reset</sl-button>
<sl-button type="submit" variant="primary">Submit</sl-button>
</form>