Textbox

Textbox component wraps an input and an optional end adornment component.

import styled, { x } from "@xstyled/styled-components";
import { useState } from "react";
import { Button } from "swash/Button";
import { PaperCopy as Icon } from "swash/Icon";
import { Textbox, TextboxEndAdornment } from "swash/controls/Textbox";

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const onChange = (event) => {
    setValue(event.target.value);
  };

  return [value, onChange];
};

function Example() {
  const [filled, setFilled] = useInput("Filled");
  const [error, setError] = useInput("Error");
  const scales = [
    { scale: "sm", title: "Small" },
    { scale: "base", title: "Base" },
    { scale: "lg", title: "Large" },
  ];

  const states = [
    {
      title: "Default",
    },
    {
      title: "Disabled",
      disabled: true,
    },
    {
      title: "Filled",
      value: filled,
      onChange: setFilled,
    },
    {
      title: "Error",
      value: error,
      onChange: setError,
      "aria-invalid": true,
    },
  ];
  return (
    <div>
      {scales.map(({ scale, title: scaleTitle }) => (
        <x.div display="flex" gap={2} flexDirection="column" key={scaleTitle}>
          <div style={{ fontSize: "24px", fontWeight: "bold" }}>
            {scaleTitle}
          </div>
          <x.div display="flex" gap={2} flexWrap="wrap" my={4}>
            {states.map(({ children, title, disabled, ...props }) => (
              <x.div display="flex" gap={2} flexDirection="column" key={title}>
                <div style={{ fontWeight: "bold" }}>{title}</div>
                <Textbox
                  scale={scale}
                  placeholder="Placeholder..."
                  disabled={disabled}
                  {...props}
                />
                <Textbox
                  scale={scale}
                  placeholder="Placeholder..."
                  disabled={disabled}
                  {...props}
                >
                  <TextboxEndAdornment>
                    <Button
                      appearance="text"
                      scale="sm"
                      iconOnly
                      disabled={disabled}
                      title="Action"
                    >
                      <Icon />
                    </Button>
                  </TextboxEndAdornment>
                </Textbox>
              </x.div>
            ))}
          </x.div>
        </x.div>
      ))}
    </div>
  );
}

render(<Example />);

Borderless

import styled, { x } from "@xstyled/styled-components";
import { Textbox } from "swash/controls/Textbox";

function Borderless() {
  return <Textbox borderless placeholder="Placeholder..." />;
}

render(<Borderless />);

Invalid

import styled, { x } from "@xstyled/styled-components";
import { Textbox } from "swash/controls/Textbox";

function AriaInvalid() {
  return <Textbox aria-invalid placeholder="Placeholder..." />;
}

render(<AriaInvalid />);

Styled

import styled, { x } from "@xstyled/styled-components";
import { Textbox } from "swash/controls/Textbox";

function Styled() {
  return <Textbox style={{ color: "red" }} placeholder="Placeholder..." />;
}

render(<Styled />);

Type "number"

import { Textbox } from "swash/controls/Textbox";

function Example() {
  return <Textbox type="number" placeholder="Placeholder..." />;
}

render(<Example />);

Type "search"

import { Textbox } from "swash/controls/Textbox";

function Example() {
  return <Textbox type="search" placeholder="Placeholder..." />;
}

render(<Example />);

Progress

Use TextboxProgress to display a progress indicator in the textbox.

import { x } from "@xstyled/styled-components";
import { Textbox, TextboxProgress } from "swash/controls/Textbox";

render(
  <x.div display="flex" flexDirection="column" gap={2}>
    <Textbox>
      <TextboxProgress />
    </Textbox>
    <Textbox scale="lg">
      <TextboxProgress />
    </Textbox>
  </x.div>,
);

API

Props

Textbox inherits from :

• input tag props
• xStyled props

And has additional props:

w,h,style,borderless and scale are applied to the Textbox's wrapper, other props are passed on to the input.