Float Field

A text field whose label starts inside the box and floats up to the top as you focus or type. The border blends to the focus colour, a new error shakes the field and turns it red, and the message is announced to screen readers. It clears with one tap and can hide its text behind a Show button for passwords. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add float-field

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/float-field.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { FloatField } from "@/components/ui/float-field";

export default function Example() {
  const [email, setEmail] = useState("");

  return (
    <FloatField
      label="Email"
      value={email}
      onChangeText={setEmail}
      keyboardType="email-address"
      helper="We only use it to sign you in"
    />
  );
}

Props