Input

A themed input, with a few extra features.

See also:

• InputField, for a labeled input with support for context help and error message.
• SearchInput

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 /> </>

<>
  <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> } /> </>

<>
  <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>
    }
  />
</>