Text field

Status

Pre-release

Username

Username*

Your unique username. You can change this later, but each name must be unique to one person!

1  import { FormLayout, TextField } from '@jobilla/starfield'
2  
3  export function BasicDemo() {
4      return (
5          <FormLayout>
6              <TextField label="Username" />
7              <TextField label="Username" required={true} />
8              <TextField
9                  label="Username"
10                  required={true}
11                  hint={
12                      <>
13                          Your unique username. You can change this later, but each name must be{' '}
14                          <strong>unique to one person</strong>!
15                      </>
16                  }
17              />
18          </FormLayout>
19      )
20  }

Affirming a valid input

Sometimes, we want to tell the user when their provided input is valid right away, so they can change their mind if it's not — think username selection fields. (Don't use this if we can proactively prevent incorrect input on the frontend immediately; use a dropdown or autocomplete input for that.)

Username*

Pick a name.

1  'use client'
2  
3  import { FormLayout, TextField, useDebouncedCallback } from '@jobilla/starfield'
4  import { useCallback, useState } from 'react'
5  
6  export function AffirmationDemo() {
7      const [status, setStatus] = useState<'none' | 'loading' | 'valid' | 'error'>('none')
8  
9      // this performs the actual check; in real applications, your validation library
10      // can probably handle all this for you.
11      const cb = useDebouncedCallback({ trailing: true, wait: 500 }, (value: string) => {
12          setTimeout(() => {
13              if (value === 'bob') {
14                  setStatus('error')
15              } else if (value === '') {
16                  setStatus('none')
17              } else {
18                  setStatus('valid')
19              }
20          }, 500 + (Math.random() * 500))
21      }, [])
22  
23      // this starts the loading indicator when anything changes.
24      const startLoad = useCallback((v: string) => {
25          if (v !== '') { setStatus('loading') }
26      }, [])
27  
28      return (
29          <FormLayout>
30              <TextField
31                  label="Username"
32                  required={true}
33                  status={status}
34                  defaultValue=""
35                  onChange={(v) => {
36                      startLoad(v)
37                      cb(v)
38                  }}
39                  hint={<>Pick a name.</>}
40                  error={status === 'error' ? <>&quot;Bob&quot; is taken!</> : undefined}
41              />
42          </FormLayout>
43      )
44  }