Skip to content

Commit fe5fb08

Browse files
zanivanzanivan
authored
[material-ui] Refine checkout template (#40967)
1 parent a774510 commit fe5fb08

File tree

20 files changed

+3147
-587
lines changed

20 files changed

+3147
-587
lines changed

‎docs/data/material/getting-started/templates/checkout/AddressForm.js‎

Lines changed: 121 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,128 @@
11
import * as React from 'react';
2-
import Grid from '@mui/material/Grid';
3-
import Typography from '@mui/material/Typography';
4-
import TextField from '@mui/material/TextField';
5-
import FormControlLabel from '@mui/material/FormControlLabel';
2+
63
import Checkbox from '@mui/material/Checkbox';
4+
import FormControlLabel from '@mui/material/FormControlLabel';
5+
import FormLabel from '@mui/material/FormLabel';
6+
import Grid from '@mui/material/Grid';
7+
import OutlinedInput from '@mui/material/OutlinedInput';
8+
import { styled } from '@mui/system';
9+
10+
const FormGrid = styled(Grid)(() => ({
11+
display: 'flex',
12+
flexDirection: 'column',
13+
}));
714

815
export default function AddressForm() {
916
return (
10-
<React.Fragment>
11-
<Typography variant="h6" gutterBottom>
12-
Shipping address
13-
</Typography>
14-
<Grid container spacing={3}>
15-
<Grid item xs={12} sm={6}>
16-
<TextField
17-
required
18-
id="firstName"
19-
name="firstName"
20-
label="First name"
21-
fullWidth
22-
autoComplete="given-name"
23-
variant="standard"
24-
/>
25-
</Grid>
26-
<Grid item xs={12} sm={6}>
27-
<TextField
28-
required
29-
id="lastName"
30-
name="lastName"
31-
label="Last name"
32-
fullWidth
33-
autoComplete="family-name"
34-
variant="standard"
35-
/>
36-
</Grid>
37-
<Grid item xs={12}>
38-
<TextField
39-
required
40-
id="address1"
41-
name="address1"
42-
label="Address line 1"
43-
fullWidth
44-
autoComplete="shipping address-line1"
45-
variant="standard"
46-
/>
47-
</Grid>
48-
<Grid item xs={12}>
49-
<TextField
50-
id="address2"
51-
name="address2"
52-
label="Address line 2"
53-
fullWidth
54-
autoComplete="shipping address-line2"
55-
variant="standard"
56-
/>
57-
</Grid>
58-
<Grid item xs={12} sm={6}>
59-
<TextField
60-
required
61-
id="city"
62-
name="city"
63-
label="City"
64-
fullWidth
65-
autoComplete="shipping address-level2"
66-
variant="standard"
67-
/>
68-
</Grid>
69-
<Grid item xs={12} sm={6}>
70-
<TextField
71-
id="state"
72-
name="state"
73-
label="State/Province/Region"
74-
fullWidth
75-
variant="standard"
76-
/>
77-
</Grid>
78-
<Grid item xs={12} sm={6}>
79-
<TextField
80-
required
81-
id="zip"
82-
name="zip"
83-
label="Zip / Postal code"
84-
fullWidth
85-
autoComplete="shipping postal-code"
86-
variant="standard"
87-
/>
88-
</Grid>
89-
<Grid item xs={12} sm={6}>
90-
<TextField
91-
required
92-
id="country"
93-
name="country"
94-
label="Country"
95-
fullWidth
96-
autoComplete="shipping country"
97-
variant="standard"
98-
/>
99-
</Grid>
100-
<Grid item xs={12}>
101-
<FormControlLabel
102-
control={<Checkbox color="secondary" name="saveAddress" value="yes" />}
103-
label="Use this address for payment details"
104-
/>
105-
</Grid>
106-
</Grid>
107-
</React.Fragment>
17+
<Grid container spacing={3}>
18+
<FormGrid item xs={12} md={6}>
19+
<FormLabel htmlFor="first-name" required>
20+
First name
21+
</FormLabel>
22+
<OutlinedInput
23+
id="first-name"
24+
name="first-name"
25+
type="name"
26+
placeholder="John"
27+
autoComplete="first name"
28+
required
29+
/>
30+
</FormGrid>
31+
<FormGrid item xs={12} md={6}>
32+
<FormLabel htmlFor="last-name" required>
33+
Last name
34+
</FormLabel>
35+
<OutlinedInput
36+
id="last-name"
37+
name="last-name"
38+
type="last-name"
39+
placeholder="Snow"
40+
autoComplete="last name"
41+
required
42+
/>
43+
</FormGrid>
44+
<FormGrid item xs={12}>
45+
<FormLabel htmlFor="address1" required>
46+
Address line 1
47+
</FormLabel>
48+
<OutlinedInput
49+
id="address1"
50+
name="address1"
51+
type="address1"
52+
placeholder="Street name and number"
53+
autoComplete="shipping address-line1"
54+
required
55+
/>
56+
</FormGrid>
57+
<FormGrid item xs={12}>
58+
<FormLabel htmlFor="address2">Address line 2</FormLabel>
59+
<OutlinedInput
60+
id="address2"
61+
name="address2"
62+
type="address2"
63+
placeholder="Apartment, suite, unit, etc. (optional)"
64+
autoComplete="shipping address-line2"
65+
required
66+
/>
67+
</FormGrid>
68+
<FormGrid item xs={6}>
69+
<FormLabel htmlFor="city" required>
70+
City
71+
</FormLabel>
72+
<OutlinedInput
73+
id="city"
74+
name="city"
75+
type="city"
76+
placeholder="New York"
77+
autoComplete="City"
78+
required
79+
/>
80+
</FormGrid>
81+
<FormGrid item xs={6}>
82+
<FormLabel htmlFor="state" required>
83+
State
84+
</FormLabel>
85+
<OutlinedInput
86+
id="state"
87+
name="state"
88+
type="state"
89+
placeholder="NY"
90+
autoComplete="State"
91+
required
92+
/>
93+
</FormGrid>
94+
<FormGrid item xs={6}>
95+
<FormLabel htmlFor="zip" required>
96+
Zip / Postal code
97+
</FormLabel>
98+
<OutlinedInput
99+
id="zip"
100+
name="zip"
101+
type="zip"
102+
placeholder="12345"
103+
autoComplete="shipping postal-code"
104+
required
105+
/>
106+
</FormGrid>
107+
<FormGrid item xs={6}>
108+
<FormLabel htmlFor="country" required>
109+
Country
110+
</FormLabel>
111+
<OutlinedInput
112+
id="country"
113+
name="country"
114+
type="country"
115+
placeholder="United States"
116+
autoComplete="shipping country"
117+
required
118+
/>
119+
</FormGrid>
120+
<FormGrid item xs={12}>
121+
<FormControlLabel
122+
control={<Checkbox name="saveAddress" value="yes" />}
123+
label="Use this address for payment details"
124+
/>
125+
</FormGrid>
126+
</Grid>
108127
);
109128
}

0 commit comments

Comments
 (0)