TextField

Labels for TextFields should describe what the field is. Labels should not be followed by a colon. Placeholder text should describe the specifics about formatting or examples for the input text. Placeholder text is optional, and should never be used to replace a label.

Required TextFields should have the required attribute. Optional TextFields should be clearly marked with "(optional)".

Try not to include too many optional fields, as it will make the form harder to comprehend and complete for the user.

Import Syntax

xxxxxxxxxx
 
import TextField from 'calcite-react/TextField';

Basic Usage

 
<TextField />

Advanced Usage

placeholder

value

Needs to be .gov

error

That's a number!

success

search

fullWidth

type="textarea"

with adornments

 
() => {
  class TextFieldExample extends React.Component {
    constructor(props) {
      super()
      this.state = {
        inputValue: '',
      }
    }
    render() {
      return (
        <div>
          <GuideExample label="placeholder">
            <FormControl>
              <TextField placeholder="A placeholder!" />
            </FormControl>
          </GuideExample>
          <GuideExample label="value">
            <FormControl>
              <TextField defaultValue="James T Kirk" />
            </FormControl>
          </GuideExample>
          <GuideExample label="error">
            <FormControl error>
              <TextField defaultValue="jkirk@gmail.com" type="email" />
              <FormHelperText>Needs to be .gov</FormHelperText>
            </FormControl>
          </GuideExample>
          <GuideExample label="success">
            <FormControl success>
              <TextField defaultValue={1} type="number" />
              <FormHelperText>That's a number!</FormHelperText>
            </FormControl>
          </GuideExample>
          <GuideExample label="search">
            <FormControl>
              <TextField
                value={this.state.inputValue}
                onChange={e => this.setState({ inputValue: e.target.value })}
                onRequestClear={() => this.setState({ inputValue: '' })}
                search
                placeholder="Search..."
              />
            </FormControl>
          </GuideExample>
          <GuideExample label="fullWidth">
            <FormControl fullWidth>
              <TextField fullWidth defaultValue="Full Width TextField" />
            </FormControl>
          </GuideExample>
          <GuideExample label='type="textarea"'>
            <FormControl>
              <TextField
                defaultValue="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                type="textarea"
              />
            </FormControl>
          </GuideExample>
          <GuideExample label="with adornments">
            <Form>
              <FormControl>
                <TextField
                  placeholder="Username"
                  rightAdornment={<Button>Yay</Button>}
                />
              </FormControl>
              <FormControl>
                <TextField
                  defaultValue="Dr. Leonard McCoy"
                  leftAdornment={<UserIcon size={16} />}
                />
              </FormControl>
              <FormControl fullWidth success>
                <TextField
                  fullWidth
                  defaultValue="500.00"
                  leftAdornment="$"
                  rightAdornment={<Button>Submit</Button>}
                />
              </FormControl>
              <FormControl>
                <TextField
                  defaultValue="500.00"
                  rightAdornment={
                    <Select
                      id="currencyUnitSelect"
                      placement="bottom-end"
                      selectedValue="usd"
                    >
                      <MenuItem value="usd">USD</MenuItem>
                      <MenuItem value="eur">EUR</MenuItem>
                      <MenuItem value="jpy">JPY</MenuItem>
                    </Select>
                  }
                />
              </FormControl>
            </Form>
          </GuideExample>
        </div>
      )
    }
  }
​
  return <TextFieldExample />
}

With Label

Name

htmlFor & id

Name

auto generated id

 
<div>
  <GuideExample label="htmlFor & id">
    <FormControl>
      <FormControlLabel htmlFor="name">Name</FormControlLabel>
      <TextField id="name" defaultValue="James Kirk" />
    </FormControl>
  </GuideExample>
  <GuideExample label="auto generated id">
    <FormControl>
      <FormControlLabel>Name</FormControlLabel>
      <TextField defaultValue="James Kirk" />
    </FormControl>
  </GuideExample>
</div>

Minimal

with adornments

 
<div>
  <GuideExample>
    <FormControl>
      <TextField minimal defaultValue="James T Kirk" />
    </FormControl>
  </GuideExample>
  <GuideExample label="with adornments">
    <FormControl>
      <TextField
        minimal
        defaultValue="500.00"
        leftAdornment="$"
        rightAdornment={<Button>Submit</Button>}
      />
    </FormControl>
  </GuideExample>
</div>

With a Ref

 
() => {
  class TextFieldWithRef extends React.Component {
    constructor(props) {
      super()
      this.inputRef = React.createRef()
      this.handleClick = this.handleClick.bind(this)
    }
​
    handleClick() {
      console.log('click', this.inputRef)
      this.inputRef.current.focus()
    }
​
    render() {
      return (
        <Form>
          <FormControl>
            <Button onClick={this.handleClick}>Click me</Button>
          </FormControl>
          <FormControl>
            <TextField ref={this.inputRef} />
          </FormControl>
        </Form>
      )
    }
  }
​
  return <TextFieldWithRef />
}

with Formik

Name

Password

{
  "name": "",
  "email": "",
  "password": ""
}

 
() => {
  const user = {
    name: '',
    email: '',
    password: '',
  }
  const onSubmit = (values, actions) => {
    setTimeout(() => {
      console.log(values)
      actions.setSubmitting(false)
    }, 1000)
  }
​
  const onValidate = values => {
    const errors = {}
    if (!values.name) {
      errors.name = 'You must have a name 🤨'
    }
​
    if (!values.email.includes('@')) {
      errors.email = 'Most emails have an @...'
    }
​
    if (values.password.length < 10) {
      errors.password =
        'That password is weak. You need at least 10 characters.'
    }
​
    return errors
  }
​
  const handleNameChanged = e => {
    // You can still attach your own onChange handlers (they will be invoked right after the Formik ones)
    console.log('Hello ', e.target.value)
  }
​
  return (
    <Formik initialValues={user} validate={onValidate} onSubmit={onSubmit}>
      {({ values, errors, touched, handleSubmit, isSubmitting }) => (
        <Form onSubmit={handleSubmit}>
          {/* name */}
​
          <FormControl
            success={touched.name && !errors.name ? true : false}
            error={touched.name && errors.name ? true : false}
          >
            <FormControlLabel htmlFor="name">Name</FormControlLabel>
            <Field
              component={TextField}
              type="text"
              name="name"
              leftAdornment={<UserIcon size={16} />}
              onChange={handleNameChanged}
            />
            <FormHelperText>
              {(touched.name && errors.name) || null}
            </FormHelperText>
          </FormControl>
​
          {/* email */}
​
          <FormControl
            success={touched.email && !errors.email ? true : false}
            error={touched.email && errors.email ? true : false}
          >
            <FormControlLabel htmlFor="email">Email</FormControlLabel>
            <Field component={TextField} type="text" name="email" />
            <FormHelperText>
              {(touched.email && errors.email) || null}
            </FormHelperText>
          </FormControl>
​
          {/* password */}
​
          <FormControl
            success={touched.password && !errors.password ? true : false}
            error={touched.password && errors.password ? true : false}
          >
            <FormControlLabel htmlFor="password">Password</FormControlLabel>
            <Field component={TextField} type="text" name="password" />
            <FormHelperText>
              {(touched.password && errors.password) || null}
            </FormHelperText>
          </FormControl>
​
          <FormControl>
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? 'Submitting.......' : 'Submit'}
            </Button>
          </FormControl>
          <pre>{JSON.stringify(values, null, 2)}</pre>
        </Form>
      )}
    </Formik>
  )
}

Props

Property	Type	Required	Default	Description
type	Enum	false	text	HTML prop to be applied to the input
value	Node	false	-	HTML prop for the current value of the input
error	Bool	false	-	The form control should show an error
success	Bool	false	-	The form control should show success
search	Bool	false	-	Option to display a magnifying glass icon and clear button to the input.
onRequestClear	Func	false	-	Callback when Search clear button is clicked
fullWidth	Bool	false	-	Make the TextField 100% width
minimal	Bool	false	-	Display prop to style the TextField with a simplified UI
horizontal	Bool	false	-	TextField and label should appear side by side instead of stacked
id	String	false	-	HTML prop for the TextField, works together with a label's `for` prop
name	String	false	-	HTML prop to name the form element

Calcite React

TextField

Import Syntax

Basic Usage

Advanced Usage

With Label

Minimal

With a Ref

with Formik

Props