Input

Basic

A basic example with an input field.

const BasicExampleComponent = () => {
  return <Input placeholder="Search for anything..."></Input>;
};

No border radius

An example of an input field with no border radius.

Track

const NoBorderRadiusComponent = () => {
  return (
    <Input placeholder="Enter tracking number..." borderRadius={0}>
      <Input.Button borderRadius={0}>Track</Input.Button>
    </Input>
  );
};

No border

An example of an input field with no border.

const NoBorderComponent = () => {
  return <Input placeholder="Add a quick note..." borderWidth={0}></Input>;
};

With Icon

You can use the <Input> component with left or right icons.

const WithIconComponent = () => {
  return (
    <>
      {/* Icon left */}
      <Input placeholder="@johndoe">
        <Input.LeftIcon>
          <User />
        </Input.LeftIcon>
      </Input>

      {/* Icon right */}
      <Input placeholder="Find a friend...">
        <Input.RightIcon>
          <User />
        </Input.RightIcon>
      </Input>
    </>
  );
};

With Custom Icon Element

You can also pass your custom react elements as icons for further customization.

const WithCustomIconElementComponent = () => {
  return (
    <>
      {/* Icon left */}
      <Input placeholder="@johndoe">
        <Input.LeftIcon>
          <User size={32} color="$red.500" />
        </Input.LeftIcon>
      </Input>

      {/* Icon right */}
      <Input placeholder="Find a friend...">
        <Input.RightIcon>
          <User size={32} color="$red.500" />
        </Input.RightIcon>
      </Input>
    </>
  );
};

Secure Text Entry

You can use the <Input> component with secure text entry (password input)

const SecureTextEntryComponent = () => {
  return (
    <>
      {/* Secure text entry - Icon left */}
      <Input placeholder="Create a strong password..." secureTextEntry={true}>
        <Input.LeftIcon>
          <Lock />
        </Input.LeftIcon>
      </Input>

      {/* Secure text entry - Icon right */}
      <Input placeholder="Confirm your password..." secureTextEntry={true}>
        <Input.RightIcon>
          <Lock />
        </Input.RightIcon>
      </Input>
    </>
  );
};

With Action Button

You can use the <Input> component with an action button.

Check availability

const WithActionButtonComponent = () => {
  return (
    <Input placeholder="Choose your unique handle...">
      <Input.LeftIcon>
        <User />
      </Input.LeftIcon>
      <Input.Button onPress={() => console.log("action button pressed")}>
        Check availability
      </Input.Button>
    </Input>
  );
};

With Label

You can use the <Input> component with a label. Optionally, you can mark it as required.

Shipping Address

Billing Address

*

const WithLabelComponent = () => {
  return (
    <>
      {/* With label */}
      <Input placeholder="742 Evergreen Terrace, Springfield...">
        <Input.Label>Shipping Address</Input.Label>
        <Input.LeftIcon>
          <Map />
        </Input.LeftIcon>
      </Input>

      {/* With label + required */}
      <Input required placeholder="Where should we deliver your order?">
        <Input.Label>Billing Address</Input.Label>
        <Input.LeftIcon>
          <Map />
        </Input.LeftIcon>
      </Input>
    </>
  );
};

Disabled

You can use the <Input> component in a disabled state.

Send code

const DisabledComponent = () => {
  return (
    <Input isDisabled placeholder="+1 (555) 123-4567">
      <Input.LeftIcon>
        <Phone />
      </Input.LeftIcon>
      <Input.Button onPress={() => console.log("on verify tapped")}>
        Send code
      </Input.Button>
    </Input>
  );
};

Custom Border Color

You can customize the border color of the <Input> component. It also changes color when focused.

const CustomBorderColorComponent = () => {
  return (
    <Input
      borderColor="$red.500"
      _focus={{ borderColor: "blue.400" }}
      placeholder="Enter your mobile number..."
    >
      <Input.LeftIcon>
        <Phone />
      </Input.LeftIcon>
    </Input>
  );
};

With Accessibility Label

You can use the <Input> component with an accessibility label to improve accessibility for users with disabilities.

const WithAccessibilityLabelComponent = () => {
  return (
    <Input
      placeholder="[email protected]"
      accessibilityLabel="Please, enter your work email address"
    >
      <Input.LeftIcon>
        <Mail />
      </Input.LeftIcon>
    </Input>
  );
};

With Validation Error Message

You can use the <Input> component with a validation error message. The error message is displayed below the input field.

This username is already taken. Try adding numbers or underscores.

const WithValidationErrorMessageComponent = () => {
  const errorColor = useColorModeValue("$red.500", "$red.300");
  
  return (
    <VStack gap="$1" alignItems="flex-start">
      <Input placeholder="Enter your username..." error>
        <Input.LeftIcon>
          <User />
        </Input.LeftIcon>
      </Input>
      <Footnote color={errorColor}>
        This username is already taken. Try adding numbers or underscores.
      </Footnote>
    </VStack>
  );
};

Success

You can use the <Input> component with a success message. The success message is displayed below the input field.

Great choice! This username is available.

const SuccessComponent = () => {
  const successColor = useColorModeValue("$emerald.500", "$emerald.300");
  
  return (
    <VStack gap="$1" alignItems="flex-start">
      <Input placeholder="Pick a creative username..." success>
        <Input.LeftIcon>
          <User />
        </Input.LeftIcon>
      </Input>
      <Footnote color={successColor}>
        Great choice! This username is available.
      </Footnote>
    </VStack>
  );
};

Override Color Mode

You can use the <Input> component with an overridden color mode

const OverrideColorModeComponent = () => {
  return (
    <Input placeholder="What should we call you?" colorMode="dark">
      <Input.LeftIcon>
        <User />
      </Input.LeftIcon>
    </Input>
  );
};

Override Accent Color

You can use the <Input> component with an overridden accent color

Save

const OverrideAccentColorComponent = () => {
  return (
    <Input placeholder="Enter your display name..." accentColor="amber">
      <Input.LeftIcon>
        <User />
      </Input.LeftIcon>
      <Input.Button onPress={() => console.log("action button pressed")}>
        Save
      </Input.Button>
    </Input>
  );
};

Override Color Mode and Accent Color

You can use the <Input> component with overridden color mode and accent color

Subscribe

const OverrideColorModeAndAccentColorComponent = () => {
  return (
    <Input
      placeholder="Join our newsletter..."
      accentColor="red"
      colorMode="dark"
    >
      <Input.LeftIcon>
        <User />
      </Input.LeftIcon>
      <Input.Button onPress={() => console.log("action button pressed")}>
        Subscribe
      </Input.Button>
    </Input>
  );
};

Controlled

You can use the <Input> component in a controlled manner by managing its value with state.

Clear input

const ControlledComponent = () => {
  const [value, setValue] = React.useState("");
  
  return (
    <VStack gap="$4" alignItems="flex-start">
      <Button
        onPress={() => {
          setValue("");
        }}
      >
        Clear input
      </Button>
      <Input
        value={value}
        onChangeText={(text) => {
          setValue(text);
          console.log("input change");
        }}
        placeholder="Write your message here..."
      ></Input>
    </VStack>
  );
};

Uncontrolled

You can use the <Input> component in an uncontrolled manner by using a ref to access its methods.

Clear input

const UncontrolledComponent = () => {
  const inputRef = React.useRef<InputHandle>(null);
  
  return (
    <VStack gap="$4" alignItems="flex-start">
      <Button
        onPress={() => {
          inputRef.current?.clear();
        }}
      >
        Clear input
      </Button>
      <Input
        ref={inputRef}
        onChangeText={(text) => {
          console.log("input change");
        }}
        placeholder="Add a comment..."
      ></Input>
    </VStack>
  );
};