From 95041b75b081f05247ff8623592eb6d01a27b852 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 5 Nov 2021 11:50:46 -0400 Subject: [PATCH] add react examples --- docs/components/form.md | 195 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 195 insertions(+) diff --git a/docs/components/form.md b/docs/components/form.md index e0fa1b188..0dceb1cee 100644 --- a/docs/components/form.md +++ b/docs/components/form.md @@ -67,6 +67,69 @@ Shoelace forms don't make use of `action` and `method` attributes and they don't ``` +```jsx react +import { + SlButton, + SlCheckbox, + SlForm, + SlInput, + SlMenuItem, + SlSelect, +} from '@shoelace-style/shoelace/dist/react'; + +function handleSubmit(event) { + const formData = event.detail.formData; + let output = ''; + + // + // Example 1: Post data to a server and wait for a JSON response + // + fetch('https://jsonplaceholder.typicode.com/posts', { + method: 'POST', + body: formData + }) + .then(response => response.json()) + .then(result => { + console.log('Success:', result); + }) + .catch(error => { + console.error('Error:', error); + }); + + // + // Example 2: Output all form control names + values + // + for (const entry of formData.entries()) { + output += `${entry[0]}: ${entry[1]}\n`; + } + alert(output); + + // + // Example 3: Get all form controls that were serialized as + // an array of HTML elements + // + console.log(event.detail.formControls); +} + +const App = () => ( + + +
+ + Birds + Cats + Dogs + +
+ + I totally agree + +

+ Submit + +); +``` + ## Form Control Validation Client-side validation can be enabled through the browser's [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for many form controls. You can enable it using props such as `required`, `pattern`, `minlength`, and `maxlength`. As the user interacts with the form control, the `invalid` attribute will reflect its validity based on its current value and the constraints that have been defined. @@ -105,6 +168,37 @@ To make a field required, use the `required` prop. The form will not be submitte ``` +```jsx react +import { + SlButton, + SlCheckbox, + SlForm, + SlInput, + SlMenuItem, + SlSelect, + SlTextarea +} from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + alert('All fields are valid!')}> + +
+ + Birds + Cats + Dogs + Other + +
+ +
+ Check me before submitting +

+ Submit + +); +``` + ### Input Patterns To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern), use the `pattern` attribute. This example only allows the letters A-Z, so the form will not submit if a number or symbol is entered. This only works with `` elements. @@ -122,6 +216,22 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/ ``` +```jsx react +import { + SlButton, + SlForm, + SlInput +} from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + alert('All fields are valid!')}> + +
+ Submit + +); +``` + ### Input Types Some input types will automatically trigger constraints, such as `email` and `url`. @@ -141,6 +251,24 @@ Some input types will automatically trigger constraints, such as `email` and `ur ``` +```jsx react +import { + SlButton, + SlForm, + SlInput +} from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + alert('All fields are valid!')}> + +
+ +
+ Submit + +); +``` + ### Custom Validation To create a custom validation error, use the `setCustomValidity` method. The form will not be submitted when this method is called with anything other than an empty string, and its message will be shown by the browser as the validation error. To make the input valid again, call the method a second time with an empty string as the argument. @@ -167,6 +295,44 @@ To create a custom validation error, use the `setCustomValidity` method. The for ``` +```jsx react +import { useRef, useState } from 'react'; +import { + SlButton, + SlForm, + SlInput +} from '@shoelace-style/shoelace/dist/react'; + +const App = () => { + const input = useRef(null); + const [value, setValue] = useState(''); + + function handleInput(event) { + setValue(event.target.value); + + if (event.target.value === 'shoelace') { + input.current.setCustomValidity(''); + } else { + input.current.setCustomValidity('Hey, you\'re supposed to type \'shoelace\' before submitting this!'); + } + } + + return ( + alert('All fields are valid!')}> + +
+ Submit + + ); +}; +``` + ### Custom Validation Styles The `invalid` attribute reflects the form control's validity, so you can style invalid fields using the `[invalid]` selector. The example below demonstrates how you can give erroneous fields a different appearance. Type something other than "shoelace" to demonstrate this. @@ -192,6 +358,35 @@ The `invalid` attribute reflects the form control's validity, so you can style i ``` +```jsx react +import { SlInput } from '@shoelace-style/shoelace/dist/react'; + +const css = ` + .custom-input[invalid]:not([disabled])::part(label), + .custom-input[invalid]:not([disabled])::part(help-text) { + color: rgb(var(--sl-color-danger-600)); + } + + .custom-input[invalid]:not([disabled])::part(base) { + border-color: rgb(var(--sl-color-danger-500)); + } + + .custom-input[invalid]:focus-within::part(base) { + box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-danger-500) / var(--sl-focus-ring-alpha)); + } +`; + +const App = () => ( + <> + + Please enter "shoelace" to continue + + + + +); +``` + ### Third-party Validation To opt out of the browser's built-in validation and use your own, add the `novalidate` attribute to the form. This will ignore all constraints and prevent the browser from showing its own warnings when form controls are invalid.