@@ -4,6 +4,8 @@ import BogButton from '../components/BogButton/BogButton';
4
4
import { BogRadioItem } from '@/components/BogRadioItem/BogRadioItem' ;
5
5
import { useState } from 'react' ;
6
6
import BogCheckbox from '@/components/BogCheckbox/BogCheckbox' ;
7
+ import { BogForm } from '@/components/BogForm/BogForm' ;
8
+ import { BogTextInput } from '@/components/BogTextInput/BogTextInput' ;
7
9
8
10
export default function Home ( ) {
9
11
const icons = [
@@ -206,6 +208,34 @@ export default function Home() {
206
208
*/ }
207
209
< div className = "flex flex-col items-center justify-between border-grey-stroke-strong border-solid rounded-sm border-2 mb-8" >
208
210
< h3 className = "self-start ml-4 text-heading-3" > Forms:</ h3 >
211
+ < BogForm
212
+ className = "w-full px-4"
213
+ onSubmit = { ( e ) => {
214
+ e . preventDefault ( ) ;
215
+ const data = Object . fromEntries ( new FormData ( e . currentTarget ) ) ;
216
+ console . log ( data ) ;
217
+ } }
218
+ >
219
+ < BogTextInput name = "name" label = "Name" placeholder = "Enter your name" />
220
+ < BogTextInput name = "email" label = "Email" placeholder = "Enter your email" />
221
+ < BogTextInput
222
+ name = "password"
223
+ label = "Password"
224
+ placeholder = "Enter your password"
225
+ type = "password"
226
+ required
227
+ />
228
+ < BogTextInput name = "phone" label = "Phone" placeholder = "Enter your phone number" type = "tel" disabled />
229
+ < BogTextInput multiline name = "message" label = "Message" placeholder = "Enter your message" />
230
+ < BogCheckbox label = "Checkbox" name = "checkbox" />
231
+ { /* you have to include a `name` prop when using BogRadioGroup in a form! */ }
232
+ < BogRadioGroup name = "radio" >
233
+ < BogRadioItem label = "Option 1" value = { '1' } />
234
+ < BogRadioItem label = "Option 2" value = { '2' } />
235
+ < BogRadioItem label = "Option 3" value = { '3' } />
236
+ < BogRadioItem label = "Option 4" value = { '4' } />
237
+ </ BogRadioGroup >
238
+ </ BogForm >
209
239
</ div >
210
240
211
241
{ /* Temp placeholder for style */ }
0 commit comments