Skip to content

Commit 717e660

Browse files
pksjcepksjce
committed
update documentation
1 parent 6acefb3 commit 717e660

File tree

1 file changed

+62
-13
lines changed

1 file changed

+62
-13
lines changed

‎docs/content/TextInput.md‎

Lines changed: 62 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,76 @@ TextInput is a form component to add default styling to the native text input.
88

99
## Default example
1010

11+
```jsx live
12+
<TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
13+
```
14+
15+
## Text Input with Icons
16+
1117
```jsx live
1218
<>
13-
<TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
19+
<TextInput
20+
leadingIcon={SearchIcon}
21+
aria-label="Zipcode"
22+
name="zipcode"
23+
placeholder="Find user"
24+
autoComplete="postal-code"
25+
/>
1426

15-
<TextInput sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
27+
<TextInput
28+
sx={{mt: 3}}
29+
trailingIcon={SearchIcon}
30+
aria-label="Zipcode"
31+
name="zipcode"
32+
placeholder="Find user"
33+
autoComplete="postal-code"
34+
/>
35+
</>
36+
```
37+
38+
## Text Input with Error and warning states
39+
40+
```jsx live
41+
<>
42+
<TextInput status="error" aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
1643

17-
<TextInput sx={{ml: 4}} icon={SearchIcon} aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
44+
<TextInput
45+
sx={{mt: 3}}
46+
status="warning"
47+
aria-label="Zipcode"
48+
name="zipcode"
49+
placeholder="Find user"
50+
autoComplete="postal-code"
51+
/>
1852
</>
1953
```
2054

55+
## Block text input
56+
57+
```jsx live
58+
<TextInput block aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
59+
```
60+
61+
## Contrast text input
62+
63+
```jsx live
64+
<TextInput contrast aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
65+
```
66+
2167
## Component props
2268

2369
Native `<input>` attributes are forwarded to the underlying React `input` component and are not listed below.
2470

25-
| Name | Type | Default | Description |
26-
| :--------- | :------------------------------------------------------------------------ | :-----: | :------------------------------------------------------------------------------------ |
27-
| aria-label | String | | Required. Allows input to be accessible. |
28-
| block | Boolean | | Adds `display: block` to element |
29-
| contrast | Boolean | | Changes background color to a higher contrast color |
30-
| variant | String | | Can be either `small` or `large`. Creates a smaller or larger input than the default. |
31-
| width | String or Number | | Set the width of the input |
32-
| maxWidth | String or Number or [Array](https://styled-system.com/guides/array-props) | | Set the maximum width of the input |
33-
| minWidth | String or Number or [Array](https://styled-system.com/guides/array-props) | | Set the minimum width of the input |
34-
| icon | Node (pass Octicon react component) | | Icon to be used inside of input. Positioned on the left edge. |
71+
| Name | Type | Default | Description |
72+
| :---------------------------------------------- | :------------------------------------------------------------------------ | :-----: | :------------------------------------------------------------------------------------ |
73+
| aria-label | String | | Required. Allows input to be accessible. |
74+
| block | Boolean | | Adds `display: block` to element |
75+
| contrast | Boolean | | Changes background color to a higher contrast color |
76+
| status | String | | Can be `error` or `warning` |
77+
| leadingIcon | Node (pass Octicon react component) | | Icon to be used inside of input. Positioned on the left edge. |
78+
| trailingIcon | Node (pass Octicon react component) | | Icon to be used inside of input. Positioned on the right edge. |
79+
| variant(deprecated - use size) | String | | Can be either `small` or `large`. Creates a smaller or larger input than the default. |
80+
| width(deprecated - use sx prop) | String or Number | | Set the width of the input |
81+
| maxWidth(deprecated - use sx prop) | String or Number or [Array](https://styled-system.com/guides/array-props) | | Set the maximum width of the input |
82+
| minWidth(deprecated - use sx prop) | String or Number or [Array](https://styled-system.com/guides/array-props) | | Set the minimum width of the input |
83+
| icon(deprecated - use leading or trailing icon) | Node (pass Octicon react component) | | Icon to be used inside of input. Positioned on the left edge. |

0 commit comments

Comments
 (0)