forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[material-ui] Refine checkout template (mui#40967)
- Loading branch information
Showing
20 changed files
with
3,147 additions
and
587 deletions.
There are no files selected for viewing
223 changes: 121 additions & 102 deletions
223
docs/data/material/getting-started/templates/checkout/AddressForm.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,109 +1,128 @@ | ||
| import * as React from 'react'; | ||
| import Grid from '@mui/material/Grid'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import TextField from '@mui/material/TextField'; | ||
| import FormControlLabel from '@mui/material/FormControlLabel'; | ||
|
|
||
| import Checkbox from '@mui/material/Checkbox'; | ||
| import FormControlLabel from '@mui/material/FormControlLabel'; | ||
| import FormLabel from '@mui/material/FormLabel'; | ||
| import Grid from '@mui/material/Grid'; | ||
| import OutlinedInput from '@mui/material/OutlinedInput'; | ||
| import { styled } from '@mui/system'; | ||
|
|
||
| const FormGrid = styled(Grid)(() => ({ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| })); | ||
|
|
||
| export default function AddressForm() { | ||
| return ( | ||
| <React.Fragment> | ||
| <Typography variant="h6" gutterBottom> | ||
| Shipping address | ||
| </Typography> | ||
| <Grid container spacing={3}> | ||
| <Grid item xs={12} sm={6}> | ||
| <TextField | ||
| required | ||
| id="firstName" | ||
| name="firstName" | ||
| label="First name" | ||
| fullWidth | ||
| autoComplete="given-name" | ||
| variant="standard" | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={12} sm={6}> | ||
| <TextField | ||
| required | ||
| id="lastName" | ||
| name="lastName" | ||
| label="Last name" | ||
| fullWidth | ||
| autoComplete="family-name" | ||
| variant="standard" | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={12}> | ||
| <TextField | ||
| required | ||
| id="address1" | ||
| name="address1" | ||
| label="Address line 1" | ||
| fullWidth | ||
| autoComplete="shipping address-line1" | ||
| variant="standard" | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={12}> | ||
| <TextField | ||
| id="address2" | ||
| name="address2" | ||
| label="Address line 2" | ||
| fullWidth | ||
| autoComplete="shipping address-line2" | ||
| variant="standard" | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={12} sm={6}> | ||
| <TextField | ||
| required | ||
| id="city" | ||
| name="city" | ||
| label="City" | ||
| fullWidth | ||
| autoComplete="shipping address-level2" | ||
| variant="standard" | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={12} sm={6}> | ||
| <TextField | ||
| id="state" | ||
| name="state" | ||
| label="State/Province/Region" | ||
| fullWidth | ||
| variant="standard" | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={12} sm={6}> | ||
| <TextField | ||
| required | ||
| id="zip" | ||
| name="zip" | ||
| label="Zip / Postal code" | ||
| fullWidth | ||
| autoComplete="shipping postal-code" | ||
| variant="standard" | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={12} sm={6}> | ||
| <TextField | ||
| required | ||
| id="country" | ||
| name="country" | ||
| label="Country" | ||
| fullWidth | ||
| autoComplete="shipping country" | ||
| variant="standard" | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={12}> | ||
| <FormControlLabel | ||
| control={<Checkbox color="secondary" name="saveAddress" value="yes" />} | ||
| label="Use this address for payment details" | ||
| /> | ||
| </Grid> | ||
| </Grid> | ||
| </React.Fragment> | ||
| <Grid container spacing={3}> | ||
| <FormGrid item xs={12} md={6}> | ||
| <FormLabel htmlFor="first-name" required> | ||
| First name | ||
| </FormLabel> | ||
| <OutlinedInput | ||
| id="first-name" | ||
| name="first-name" | ||
| type="name" | ||
| placeholder="John" | ||
| autoComplete="first name" | ||
| required | ||
| /> | ||
| </FormGrid> | ||
| <FormGrid item xs={12} md={6}> | ||
| <FormLabel htmlFor="last-name" required> | ||
| Last name | ||
| </FormLabel> | ||
| <OutlinedInput | ||
| id="last-name" | ||
| name="last-name" | ||
| type="last-name" | ||
| placeholder="Snow" | ||
| autoComplete="last name" | ||
| required | ||
| /> | ||
| </FormGrid> | ||
| <FormGrid item xs={12}> | ||
| <FormLabel htmlFor="address1" required> | ||
| Address line 1 | ||
| </FormLabel> | ||
| <OutlinedInput | ||
| id="address1" | ||
| name="address1" | ||
| type="address1" | ||
| placeholder="Street name and number" | ||
| autoComplete="shipping address-line1" | ||
| required | ||
| /> | ||
| </FormGrid> | ||
| <FormGrid item xs={12}> | ||
| <FormLabel htmlFor="address2">Address line 2</FormLabel> | ||
| <OutlinedInput | ||
| id="address2" | ||
| name="address2" | ||
| type="address2" | ||
| placeholder="Apartment, suite, unit, etc. (optional)" | ||
| autoComplete="shipping address-line2" | ||
| required | ||
| /> | ||
| </FormGrid> | ||
| <FormGrid item xs={6}> | ||
| <FormLabel htmlFor="city" required> | ||
| City | ||
| </FormLabel> | ||
| <OutlinedInput | ||
| id="city" | ||
| name="city" | ||
| type="city" | ||
| placeholder="New York" | ||
| autoComplete="City" | ||
| required | ||
| /> | ||
| </FormGrid> | ||
| <FormGrid item xs={6}> | ||
| <FormLabel htmlFor="state" required> | ||
| State | ||
| </FormLabel> | ||
| <OutlinedInput | ||
| id="state" | ||
| name="state" | ||
| type="state" | ||
| placeholder="NY" | ||
| autoComplete="State" | ||
| required | ||
| /> | ||
| </FormGrid> | ||
| <FormGrid item xs={6}> | ||
| <FormLabel htmlFor="zip" required> | ||
| Zip / Postal code | ||
| </FormLabel> | ||
| <OutlinedInput | ||
| id="zip" | ||
| name="zip" | ||
| type="zip" | ||
| placeholder="12345" | ||
| autoComplete="shipping postal-code" | ||
| required | ||
| /> | ||
| </FormGrid> | ||
| <FormGrid item xs={6}> | ||
| <FormLabel htmlFor="country" required> | ||
| Country | ||
| </FormLabel> | ||
| <OutlinedInput | ||
| id="country" | ||
| name="country" | ||
| type="country" | ||
| placeholder="United States" | ||
| autoComplete="shipping country" | ||
| required | ||
| /> | ||
| </FormGrid> | ||
| <FormGrid item xs={12}> | ||
| <FormControlLabel | ||
| control={<Checkbox name="saveAddress" value="yes" />} | ||
| label="Use this address for payment details" | ||
| /> | ||
| </FormGrid> | ||
| </Grid> | ||
| ); | ||
| } |
Oops, something went wrong.