4.8 KiB
macOS Float Label Pattern Text Field
A macOS Cocoa single-line NSTextField that implements the Float Label Pattern. You can read about the float pattern here. Usable in Swift and Objective-C projects. Supports secure edit fields.
Screenshot
Why?
I was curious as to whether this pattern would work for a Mac program. I wanted this to be a basic drop-in for an existing text field, using the NSTextField placeholderString
value as the floating label title.
Installation
Swift Package Manager
Add https://github.com/dagronf/DSFFloatLabelledTextControl
to your project.
Cocoapods
Add pod 'DSFFloatLabelledTextControl', :git => 'https://github.com/dagronf/DSFFloatLabelledTextControl'
to your podfile.
Directly
Copy the DSFFloatLabelledTextField.swift
into your project. This class inherits directly from NSTextField
so all settings that you make on a text field (eg. alignment) should also apply here.
Usage
Interface builder
- Drop in a new Text Field into your canvas and set its class to
DSFFloatLabelledTextField
orDSFFloatLabelledSecureTextControl
depending on whether you need a secure field - Set the size and style of your primary font as you would a regular text field
- Set the size of the secondary font via the attributes inspector for the control
Dynamically
let field = DSFFloatLabelledTextField()
field.placeholderString = "Dynamic Created"
field.font = NSFont.systemFont(ofSize: 16)
parentView.addSubview(field)
/// Setup autolayout constraints etc.
Custom Properties
This control inherits from NSTextField
, so all NSTextField
functionalities (like cocoa binding and Interface Builder settings) are available. If you can use an NSTextField, you can use this control.
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 programatically or via Interface Builder, to receive additional information regarding the actions of the control.
@objc public protocol DSFFloatLabelledTextFieldDelegate: NSObjectProtocol {
/// Called when the label is shown or hidden
@objc optional func floatLabelledTextField(_ field: DSFFloatLabelledTextField, didShowFloatingLabel didShow: Bool)
/// Called when the field becomes or loses first responder status
@objc optional func floatLabelledTextField(_ field: DSFFloatLabelledTextField, didFocus: Bool)
/// Called when the content of the field changes
@objc optional func floatLabelledTextFieldContentChanged(_ field: DSFFloatLabelledTextField)
}
Screenshot

Credits
- Pattern devised by Matt D. Smith
- Read about the pattern here
- UITextField implementation
Versions
1.8.0
Added secure text field support, delegate support
License
MIT License
Copyright (c) 2023 Darren Ford
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.