Skip to main content

Input

A themed input, with a few extra features.

See also:

Features​

  • Support for "invalid" state (red outline). See spec.
  • Support for auto selecting the text when the input is focused.
  • Disables spell check by default. It can be overwritten.
  • before and after addons, aka. built-in buttons

Remaining​

  • 🚧 Support for add-ons, (aka built-in buttons, aka decorators), within the input box, before and after the input area.

Live example​

Result
Loading...
Live Editor
<>
  <Input placeholder="Simple example" /> <br /> <br />
  <Input placeholder="Error" validationState="error" /> <br /> <br />
  <Input placeholder="Warning" validationState="warning" /> <br />
</>

Addons​

addonBefore and addonAfter can be used to render icons and icon buttons within the input box, before and after the input element. Buttons rendered in addonAfter are also known as Built-in buttons.

Result
Loading...
Live Editor
<>
  <Input
    addonBefore={<PlatformIcon icon="actions/search.svg" />}
    addonAfter={
      <>
        <TooltipTrigger tooltip={<ActionTooltip actionName="Match Case" />}>
          <StyledHoverContainer as={IconButton} excludeFromTabOrder={false}>
            <AutoHoverPlatformIcon
              icon="actions/regex"
              hoverIcon="actions/regexHovered"
            />
          </StyledHoverContainer>
        </TooltipTrigger>
        <TooltipTrigger tooltip={<ActionTooltip actionName="Regex" />}>
          <StyledHoverContainer as={IconButton} excludeFromTabOrder={false}>
            <AutoHoverPlatformIcon
              icon="actions/matchCase.svg"
              hoverIcon="actions/matchCaseHovered.svg"
            />
          </StyledHoverContainer>
        </TooltipTrigger>
      </>
    }
  />
  <br /> <br />
  <Input
    placeholder="Environment variables"
    style={{ width: "min(300px, 90vw)" }}
    addonAfter={
      <TooltipTrigger
        tooltip={<ActionTooltip actionName="Edit environment Variables (⇧⏎)" />}
      >
        {(props) => (
          <AutoHoverPlatformIcon
            {...props}
            style={{ marginRight: ".2rem" }}
            role="button"
            icon="general/inlineVariables"
          />
        )}
      </TooltipTrigger>
    }
  />
</>