Skip to content

Commit cf23a01

Browse files
tugcekucukoglutugcekucukoglu
committed
feat: InputGroup docs added
1 parent 647df38 commit cf23a01

11 files changed

Lines changed: 341 additions & 0 deletions

File tree

‎apps/showcase/demo/inputgroup/basic-demo.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { InputGroup } from 'primereact/inputgroup';
2+
import { InputText } from 'primereact/inputtext';
3+
4+
export default function BasicDemo() {
5+
return (
6+
<div className="card grid grid-cols-1 md:grid-cols-2 gap-4">
7+
<InputGroup>
8+
<InputGroup.Addon>
9+
<i className="pi pi-user"></i>
10+
</InputGroup.Addon>
11+
<InputText placeholder="Username" />
12+
</InputGroup>
13+
14+
<InputGroup>
15+
<InputGroup.Addon>www</InputGroup.Addon>
16+
<InputText placeholder="Website" />
17+
</InputGroup>
18+
</div>
19+
);
20+
}

‎apps/showcase/demo/inputgroup/button-demo.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Button } from 'primereact/button';
2+
import { InputGroup } from 'primereact/inputgroup';
3+
import { InputText } from 'primereact/inputtext';
4+
5+
export default function ButtonDemo() {
6+
return (
7+
<div className="card flex flex-col md:flex-row gap-4">
8+
<InputGroup>
9+
<Button>Search</Button>
10+
<InputText placeholder="Keyword" />
11+
</InputGroup>
12+
13+
<InputGroup>
14+
<InputText placeholder="Keyword" />
15+
<InputGroup.Addon>
16+
<Button severity="secondary" variant="text">
17+
<i className="pi pi-search" />
18+
</Button>
19+
</InputGroup.Addon>
20+
</InputGroup>
21+
22+
<InputGroup>
23+
<InputGroup.Addon>
24+
<Button severity="secondary">
25+
<i className="pi pi-check" />
26+
</Button>
27+
</InputGroup.Addon>
28+
<InputText placeholder="Vote" />
29+
<InputGroup.Addon>
30+
<Button severity="secondary">
31+
<i className="pi pi-times" />
32+
</Button>
33+
</InputGroup.Addon>
34+
</InputGroup>
35+
</div>
36+
);
37+
}

‎apps/showcase/demo/inputgroup/checkbox-radio-demo.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Checkbox } from 'primereact/checkbox';
2+
import { InputGroup } from 'primereact/inputgroup';
3+
import { InputText } from 'primereact/inputtext';
4+
import { RadioButton } from 'primereact/radiobutton';
5+
6+
export default function CheckboxRadioDemo() {
7+
return (
8+
<div className="card flex flex-col md:flex-row gap-4">
9+
<InputGroup>
10+
<InputText placeholder="Price" />
11+
<InputGroup.Addon>
12+
<RadioButton name="rb1" value="rb1" />
13+
</InputGroup.Addon>
14+
</InputGroup>
15+
16+
<InputGroup>
17+
<InputGroup.Addon>
18+
<Checkbox />
19+
</InputGroup.Addon>
20+
<InputText placeholder="Username" />
21+
</InputGroup>
22+
23+
<InputGroup>
24+
<InputGroup.Addon>
25+
<Checkbox />
26+
</InputGroup.Addon>
27+
<InputText placeholder="Website" />
28+
<InputGroup.Addon>
29+
<RadioButton name="rb2" value="rb2" />
30+
</InputGroup.Addon>
31+
</InputGroup>
32+
</div>
33+
);
34+
}

‎apps/showcase/demo/inputgroup/float-label-demo.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { InputGroup } from 'primereact/inputgroup';
2+
import { InputText } from 'primereact/inputtext';
3+
import { Label } from 'primereact/label';
4+
import * as React from 'react';
5+
6+
export default function FloatLabelDemo() {
7+
const [value1, setValue1] = React.useState('');
8+
const [value2, setValue2] = React.useState('');
9+
const [value3, setValue3] = React.useState('');
10+
11+
return (
12+
<div className="card flex flex-col md:items-end md:flex-row gap-4">
13+
<InputGroup>
14+
<InputGroup.Addon>
15+
<i className="pi pi-user"></i>
16+
</InputGroup.Addon>
17+
<Label.Float>
18+
<InputText id="over_label" value={value1} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue1(e.currentTarget.value)} />
19+
<Label htmlFor="over_label">Over Label</Label>
20+
</Label.Float>
21+
</InputGroup>
22+
23+
<InputGroup>
24+
<InputGroup.Addon>$</InputGroup.Addon>
25+
<Label.Float variant="in">
26+
<InputText id="in_label" value={value2} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue2(e.currentTarget.value)} />
27+
<Label htmlFor="in_label">In Label</Label>
28+
</Label.Float>
29+
<InputGroup.Addon>.00</InputGroup.Addon>
30+
</InputGroup>
31+
32+
<InputGroup>
33+
<InputGroup.Addon>www</InputGroup.Addon>
34+
<Label.Float variant="on">
35+
<InputText id="on_label" value={value3} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue3(e.currentTarget.value)} />
36+
<Label htmlFor="on_label">On Label</Label>
37+
</Label.Float>
38+
</InputGroup>
39+
</div>
40+
);
41+
}

‎apps/showcase/demo/inputgroup/ifta-label-demo.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { InputGroup } from 'primereact/inputgroup';
2+
import { InputText } from 'primereact/inputtext';
3+
import { Label } from 'primereact/label';
4+
5+
export default function IftaLabelDemo() {
6+
return (
7+
<div className="card flex justify-center">
8+
<InputGroup>
9+
<InputGroup.Addon>
10+
<i className="pi pi-user"></i>
11+
</InputGroup.Addon>
12+
<Label.Ifta>
13+
<InputText id="name" defaultValue="Amy" />
14+
<Label htmlFor="name">Name</Label>
15+
</Label.Ifta>
16+
</InputGroup>
17+
</div>
18+
);
19+
}

‎apps/showcase/demo/inputgroup/inputgroup-pt.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { InputGroup } from 'primereact/inputgroup';
2+
import { InputText } from 'primereact/inputtext';
3+
4+
export default function InputGroupPTDemo() {
5+
return (
6+
<div className="flex justify-center">
7+
<InputGroup className="sm:!w-96">
8+
<InputGroup.Addon>
9+
<i className="pi pi-clock"></i>
10+
</InputGroup.Addon>
11+
<InputGroup.Addon>
12+
<i className="pi pi-star-fill"></i>
13+
</InputGroup.Addon>
14+
<InputText placeholder="Price" />
15+
<InputGroup.Addon>$</InputGroup.Addon>
16+
<InputGroup.Addon>.00</InputGroup.Addon>
17+
</InputGroup>
18+
</div>
19+
);
20+
}

‎apps/showcase/demo/inputgroup/multiple-demo.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { InputGroup } from 'primereact/inputgroup';
2+
import { InputText } from 'primereact/inputtext';
3+
4+
export default function MultipleDemo() {
5+
return (
6+
<div className="card flex justify-center">
7+
<InputGroup className="sm:!w-96">
8+
<InputGroup.Addon>
9+
<i className="pi pi-clock"></i>
10+
</InputGroup.Addon>
11+
<InputGroup.Addon>
12+
<i className="pi pi-star-fill"></i>
13+
</InputGroup.Addon>
14+
<InputText placeholder="Price" />
15+
<InputGroup.Addon>$</InputGroup.Addon>
16+
<InputGroup.Addon>.00</InputGroup.Addon>
17+
</InputGroup>
18+
</div>
19+
);
20+
}

‎apps/showcase/docs/components/inputgroup/api.mdx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
title: InputGroup API
3+
description: API documentation for InputGroup component
4+
component: inputgroup
5+
---
6+
7+
## InputGroup
8+
9+
### Props
10+
11+
<DocTable name="InputGroup" category="api" type="props" />
12+
13+
### Interfaces
14+
15+
<DocTable name="InputGroup" category="api" type="interfaces" />
16+
17+
### Types
18+
19+
<DocTable name="InputGroup" category="api" type="types" />
20+
21+
## InputGroupAddon
22+
23+
### Props
24+
25+
<DocTable name="InputGroupAddon" category="api" type="props" />
26+
27+
### Exposes
28+
29+
<DocTable name="InputGroupAddon" category="api" type="exposes" />
30+
31+
### Interfaces
32+
33+
<DocTable name="InputGroupAddon" category="api" type="interfaces" />
34+
35+
### Types
36+
37+
<DocTable name="InputGroupAddon" category="api" type="types" />

‎apps/showcase/docs/components/inputgroup/features.mdx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: InputGroup
3+
description: InputGroup displays text, icon, buttons and other content can be grouped next to an input.
4+
component: inputgroup
5+
---
6+
7+
## Usage
8+
9+
```tsx
10+
import { InputGroup } from 'primereact/inputgroup';
11+
```
12+
13+
```tsx
14+
<InputGroup>
15+
<InputGroup.Addon />
16+
</InputGroup>
17+
```
18+
19+
## Examples
20+
21+
### Basic
22+
23+
A group is created by wrapping the input and add-ons with the `InputGroup` component. Each add-on element is defined as a child of `InputGroup.Addon` component.
24+
25+
<DocDemoViewer name="inputgroup:basic-demo" />
26+
27+
### Multiple
28+
29+
Multiple add-ons can be placed inside the same group.
30+
31+
<DocDemoViewer name="inputgroup:multiple-demo" />
32+
33+
### Button
34+
35+
Buttons can be placed at either side of an input element.
36+
37+
<DocDemoViewer name="inputgroup:button-demo" />
38+
39+
### Checkbox & Radio
40+
41+
Checkbox and RadioButton components can be combined with an input element under the same group.
42+
43+
<DocDemoViewer name="inputgroup:checkbox-radio-demo" />
44+
45+
### Float Label
46+
47+
FloatLabel visually integrates a label with its form element. Visit [FloatLabel](/docs/components/floatlabel) documentation for more information.
48+
49+
<DocDemoViewer name="inputgroup:float-label-demo" />
50+
51+
### Ifta Label
52+
53+
IftaLabel is used to create infield top aligned labels. Visit [IftaLabel](/docs/components/iftalabel) documentation for more information.
54+
55+
<DocDemoViewer name="inputgroup:ifta-label-demo" />
56+
57+
## Accessibility
58+
59+
### Screen Reader
60+
61+
InputGroup and InputGroupAddon do not require any roles and attributes.
62+
63+
### Keyboard Support
64+
65+
Components does not include any interactive elements.

‎apps/showcase/docs/components/inputgroup/pt.mdx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: InputGroup Pass Through
3+
description: Pass Through documentation for InputGroup component
4+
component: inputgroup
5+
---
6+
7+
## Viewer
8+
9+
Some sections may not be visible due to the availability of the particular feature.
10+
11+
<DocPTViewer name="inputgroup-pt" components={['InputGroup']} />
12+
13+
## InputGroup PT Options
14+
15+
<DocTable name="InputGroup" category="pt" />
16+
17+
## InputGroupAddon PT Options
18+
19+
<DocTable name="InputGroupAddon" category="pt" />

0 commit comments

Comments
 (0)