mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
add react examples
This commit is contained in:
Cory LaViska
@@ -67,6 +67,69 @@ Shoelace forms don't make use of `action` and `method` attributes and they don't
|
||||
</script>
|
||||
```
|
||||
|
||||
```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 = () => (
|
||||
<SlForm onSlSubmit={handleSubmit}>
|
||||
<SlInput name="name" type="text" label="Name" />
|
||||
<br />
|
||||
<SlSelect name="favorite" label="Select your favorite">
|
||||
<SlMenuItem value="birds">Birds</SlMenuItem>
|
||||
<SlMenuItem value="cats">Cats</SlMenuItem>
|
||||
<SlMenuItem value="dogs">Dogs</SlMenuItem>
|
||||
</SlSelect>
|
||||
<br />
|
||||
<SlCheckbox name="agree" value="yes">
|
||||
I totally agree
|
||||
</SlCheckbox>
|
||||
<br /><br />
|
||||
<SlButton submit>Submit</SlButton>
|
||||
</SlForm>
|
||||
);
|
||||
```
|
||||
|
||||
## 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
|
||||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlCheckbox,
|
||||
SlForm,
|
||||
SlInput,
|
||||
SlMenuItem,
|
||||
SlSelect,
|
||||
SlTextarea
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlForm onSlSubmit={() => alert('All fields are valid!')}>
|
||||
<SlInput name="name" label="Name" required />
|
||||
<br />
|
||||
<SlSelect label="Favorite Animal" clearable required>
|
||||
<SlMenuItem value="birds">Birds</SlMenuItem>
|
||||
<SlMenuItem value="cats">Cats</SlMenuItem>
|
||||
<SlMenuItem value="dogs">Dogs</SlMenuItem>
|
||||
<SlMenuItem value="other">Other</SlMenuItem>
|
||||
</SlSelect>
|
||||
<br />
|
||||
<SlTextarea name="comment" label="Comment" required></SlTextarea>
|
||||
<br />
|
||||
<SlCheckbox required>Check me before submitting</SlCheckbox>
|
||||
<br /><br />
|
||||
<SlButton type="primary" submit>Submit</SlButton>
|
||||
</SlForm>
|
||||
);
|
||||
```
|
||||
|
||||
### 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 `<sl-input>` elements.
|
||||
@@ -122,6 +216,22 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
|
||||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlForm,
|
||||
SlInput
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlForm onSlSubmit={() => alert('All fields are valid!')}>
|
||||
<SlInput name="letters" required label="Letters" pattern="[A-Za-z]+" />
|
||||
<br />
|
||||
<SlButton type="primary" submit>Submit</SlButton>
|
||||
</SlForm>
|
||||
);
|
||||
```
|
||||
|
||||
### 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
|
||||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlForm,
|
||||
SlInput
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlForm onSlSubmit={() => alert('All fields are valid!')}>
|
||||
<SlInput type="email" label="Email" placeholder="you@example.com" required />
|
||||
<br />
|
||||
<SlInput type="url" label="URL" placeholder="https://example.com/" required />
|
||||
<br />
|
||||
<SlButton type="primary" submit>Submit</SlButton>
|
||||
</SlForm>
|
||||
);
|
||||
```
|
||||
|
||||
### 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
|
||||
</script>
|
||||
```
|
||||
|
||||
```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 (
|
||||
<SlForm onSlSubmit={() => alert('All fields are valid!')}>
|
||||
<SlInput
|
||||
ref={input}
|
||||
label="Type 'shoelace'"
|
||||
required
|
||||
value={value}
|
||||
onSlInput={handleInput}
|
||||
/>
|
||||
<br />
|
||||
<SlButton type="primary" submit>Submit</SlButton>
|
||||
</SlForm>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 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
|
||||
</style>
|
||||
```
|
||||
|
||||
```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 = () => (
|
||||
<>
|
||||
<SlInput className="custom-input" required pattern="shoelace">
|
||||
<small slot="help-text">Please enter "shoelace" to continue</small>
|
||||
</SlInput>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
||||
Reference in New Issue
Block a user