DSFFloatLabelledTextControl

screenshot of DSFFloatLabelledTextControl

A macOS Cocoa single-line NSTextField/NSSecureTextField that implements the Float Label Pattern.

Overview

The macOS Float Label Pattern Text Field is a macOS Cocoa single-line text field that implements the Float Label Pattern. This pattern adds a floating label above the text field, providing visual cues to the user. This implementation allows for easy integration into existing projects by using the NSTextField's placeholderString value as the floating label title.

Features

  • Drop-in replacement for an existing text field
  • Uses the NSTextField placeholderString value as the floating label title
  • Supports secure text fields
  • Customizable properties for text size and spacing
  • Inherits all functionality of NSTextField

Swift Package Manager

  1. Add https://github.com/dagronf/DSFFloatLabelledTextControl to your project.
  2. Compile and build your project.

CocoaPods

  1. Add pod 'DSFFloatLabelledTextControl', :git => 'https://github.com/dagronf/DSFFloatLabelledTextControl' to your podfile.
  2. Run pod install to install the dependency.

Usage

Interface Builder

  1. Drag and drop a new Text Field into your canvas.
  2. Set its class to DSFFloatLabelledTextField or DSFFloatLabelledSecureTextControl depending on whether you need a secure field.
  3. Set the size and style of your primary font as you would for a regular text field.
  4. Set the size of the secondary font via the attributes inspector for the control.

Dynamic Usage

Custom Properties:

  • placeholderTextSize: the size of the text used in the floating label (in pt).
  • placeholderSpacing: the distance between the text field text and the floating label (in px).

Delegate Handling:

You can specify a delegate (floatLabelDelegate), either programmatically or via Interface Builder, to receive additional information regarding the actions of the control.

Summary

The macOS Float Label Pattern Text Field is a convenient implementation of the Float Label Pattern in macOS Cocoa. It provides visual cues to the user by adding a floating label above the text field. This control can be easily integrated into existing projects and supports customizations like text size and spacing.

ui-kit
UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.