TagInput

TagInput component is a robust, minimal and performant input field for creating multiple tags.

Import

import { TagInput } from '@sajari-ui/core';

import { TagInput } from '@sajari-ui/core';

Usage

Here's a basic usage of the TagInput component.

Editable Example

example tag

function Example() {
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);

  return (
    <>
      <TagInput tags={tags} onChange={handleChange} placeholder="Type and press enter" />
    </>
  );
}

function Example() {
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);
  return (
    <>
      <TagInput tags={tags} onChange={handleChange} placeholder="Type and press enter" />
    </>
  );
}

Sizes

Editable Example

example tag

function Example() {
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);

  return (
    <>
      <TagInput tags={tags} onChange={handleChange} size="sm" placeholder="Type and press enter" />
    </>
  );
}

function Example() {
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);
  return (
    <>
      <TagInput tags={tags} onChange={handleChange} size="sm" placeholder="Type and press enter" />
    </>
  );
}

Max tags

Editable Example

Max Tags

example tag

function Example() {
  const [maxTags, setMaxTags] = React.useState(5);
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);

  return (
    <>
      <Grid padding="pb-3" gridTemplateColumns="grid-cols-2">
        <Label htmlFor="maxTags">Max Tags</Label>
        <TextInput
          id="maxTags"
          type="number"
          value={maxTags}
          onChange={(e) => setMaxTags(Number(e.target.value) || undefined)}
        />
      </Grid>

      <TagInput tags={tags} onChange={handleChange} maxTags={maxTags} placeholder="Type and press enter" />
    </>
  );
}

function Example() {
  const [maxTags, setMaxTags] = React.useState(5);
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);
  return (
    <>
      <Grid padding="pb-3" gridTemplateColumns="grid-cols-2">
        <Label htmlFor="maxTags">Max Tags</Label>
        <TextInput
          id="maxTags"
          type="number"
          value={maxTags}
          onChange={(e) => setMaxTags(Number(e.target.value) || undefined)}
        />
      </Grid>
      <TagInput tags={tags} onChange={handleChange} maxTags={maxTags} placeholder="Type and press enter" />
    </>
  );
}

Editable

Editable Example

Editable

example tag

function Example() {
  const [editable, setEditable] = React.useState(true);
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);

  return (
    <>
      <Box padding="pb-3">
        <Checkbox checked={editable} onChange={(e) => setEditable(e.target.checked)}>
          Editable
        </Checkbox>
      </Box>

      <TagInput tags={tags} onChange={handleChange} editable={editable} placeholder="Type and press enter" />
    </>
  );
}

function Example() {
  const [editable, setEditable] = React.useState(true);
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);
  return (
    <>
      <Box padding="pb-3">
        <Checkbox checked={editable} onChange={(e) => setEditable(e.target.checked)}>
          Editable
        </Checkbox>
      </Box>
      <TagInput tags={tags} onChange={handleChange} editable={editable} placeholder="Type and press enter" />
    </>
  );
}

Read Only

Editable Example

Read Only

example tag

function Example() {
  const [readOnly, setReadOnly] = React.useState(false);
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);

  return (
    <>
      <Box padding="pb-3">
        <Checkbox checked={readOnly} onChange={(e) => setReadOnly(e.target.checked)}>
          Read Only
        </Checkbox>
      </Box>

      <TagInput tags={tags} onChange={handleChange} readOnly={readOnly} placeholder="Type and press enter" />
    </>
  );
}

function Example() {
  const [readOnly, setReadOnly] = React.useState(false);
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);
  return (
    <>
      <Box padding="pb-3">
        <Checkbox checked={readOnly} onChange={(e) => setReadOnly(e.target.checked)}>
          Read Only
        </Checkbox>
      </Box>
      <TagInput tags={tags} onChange={handleChange} readOnly={readOnly} placeholder="Type and press enter" />
    </>
  );
}

Remove on backspace

Editable Example

Remove on backspace

example tag

function Example() {
  const [removeOnBackspace, setRemoveOnBackspace] = React.useState(false);
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);

  return (
    <>
      <Box padding="pb-3">
        <Checkbox checked={removeOnBackspace} onChange={(e) => setRemoveOnBackspace(e.target.checked)}>
          Remove on backspace
        </Checkbox>
      </Box>

      <TagInput
        tags={tags}
        onChange={handleChange}
        removeOnBackspace={removeOnBackspace}
        placeholder="Type and press enter"
      />
    </>
  );
}

function Example() {
  const [removeOnBackspace, setRemoveOnBackspace] = React.useState(false);
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);
  return (
    <>
      <Box padding="pb-3">
        <Checkbox checked={removeOnBackspace} onChange={(e) => setRemoveOnBackspace(e.target.checked)}>
          Remove on backspace
        </Checkbox>
      </Box>
      <TagInput
        tags={tags}
        onChange={handleChange}
        removeOnBackspace={removeOnBackspace}
        placeholder="Type and press enter"
      />
    </>
  );
}

Allow line break

Editable Example

Allow line break

example tag

function Example() {
  const [allowLineBreak, setAllowLineBreak] = React.useState(true);
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);

  return (
    <>
      <Box padding="pb-3">
        <Checkbox checked={allowLineBreak} onChange={(e) => setAllowLineBreak(e.target.checked)}>
          Allow line break
        </Checkbox>
      </Box>

      <TagInput
        tags={tags}
        onChange={handleChange}
        allowLineBreak={allowLineBreak}
        placeholder="Type and press enter"
      />
    </>
  );
}

function Example() {
  const [allowLineBreak, setAllowLineBreak] = React.useState(true);
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);
  return (
    <>
      <Box padding="pb-3">
        <Checkbox checked={allowLineBreak} onChange={(e) => setAllowLineBreak(e.target.checked)}>
          Allow line break
        </Checkbox>
      </Box>
      <TagInput
        tags={tags}
        onChange={handleChange}
        allowLineBreak={allowLineBreak}
        placeholder="Type and press enter"
      />
    </>
  );
}

Validator

Editable Example

Validate Email

example tag

function Example() {
  const [validateEmail, setValidateEmail] = React.useState(false);
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);

  return (
    <>
      <Box padding="pb-3">
        <Checkbox checked={validateEmail} onChange={(e) => setValidateEmail(e.target.checked)}>
          Validate Email
        </Checkbox>
      </Box>

      <TagInput
        tags={tags}
        onChange={handleChange}
        placeholder="Type and press enter"
        validator={(value) => {
          if (!validateEmail) {
            return true;
          }
          // Don't actually validate e-mails this way
          const isEmail = value.indexOf('@') !== -1;
          if (!isEmail) {
            alert('Please enter an e-mail address');
          }
          // Return boolean to indicate validity
          return isEmail;
        }}
      />
    </>
  );
}

function Example() {
  const [validateEmail, setValidateEmail] = React.useState(false);
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);
  return (
    <>
      <Box padding="pb-3">
        <Checkbox checked={validateEmail} onChange={(e) => setValidateEmail(e.target.checked)}>
          Validate Email
        </Checkbox>
      </Box>
      <TagInput
        tags={tags}
        onChange={handleChange}
        placeholder="Type and press enter"
        validator={(value) => {
          if (!validateEmail) {
            return true;
          }
          // Don't actually validate e-mails this way
          const isEmail = value.indexOf('@') !== -1;
          if (!isEmail) {
            alert('Please enter an e-mail address');
          }
          // Return boolean to indicate validity
          return isEmail;
        }}
      />
    </>
  );
}

Add tag on blur

Editable Example

example tag

function Example() {
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);

  return (
    <>
      <TagInput tags={tags} onChange={handleChange} placeholder="Type and press enter" addTagsOnBlur />
    </>
  );
}

function Example() {
  const [tags, setTags] = React.useState(['example tag']);
  const handleChange = (newTags) => setTags(newTags);
  return (
    <>
      <TagInput tags={tags} onChange={handleChange} placeholder="Type and press enter" addTagsOnBlur />
    </>
  );
}

Props

The TagInput component composes PseudoBox so you can pass all PseudoBox props, and React.InputHTMLAttributes.

Name	Type	Default	Description
`tags`	`string[]`	required	A string array containing a list of tags.
`onChange`	`function`	required	A function that receives the updated tags, used to update your state.
`placeholder`	`string`		The placeholder for the inner input field.
`size`	`sm`, `md`	`md`	The size of the input field.
`maxTags`	`number`		Set the maximum number of tags allowed. Once reached, the inner input field will be hidden. Defaults to undefined which is unlimited.
`editable`	`boolean`	`false`	If enabled, a user can click a tag and change it's value directly.
`readOnly`	`boolean`	`false`	If enabled, tags cannot be edited or removed and the inner input field is hidden.
`removeOnBackspace`	`boolean`	`true`	If enabled, a user can delete a tag if they press backspace when focused on the inner input field or a specific tag input field.
`allowLineBreak`	`boolean`	`false`	If enabled, tags will be broken into a new line when the container is overflow.
`validator`	`function`		A function that receives a specific tag value that a user is attempting to add and returns a boolean indicating if it is valid. If invalid, the tag will not be added.
`tagRender`	`(props: {tag: string, onUpdate: function, onDelete: function, index: number}) => JSX.Element`		Custom render view for tags.
`hasInputWrapper`	`boolean`	`true`	If true, use form input style.
`splitChar`	`string`		Add multiple items by splitting the input value by the provided string.
`addTagsOnBlur`	`boolean`	`false`	If enabled, a tag will be added or updated on blur.
`onInputChange`	`(string) => void`		A callback function when the input changes.