OTP Input

LiqOtpInput is a fixed-length numeric code entry field. It renders N separate boxes that auto-advance focus as the user types — backspace on an empty box moves focus back, and pasting a string of digits fills all boxes at once.

Default

import 'package:docs_snippets/src/demo.dart';import 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/liqkit_ui.dart';​/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget otpDefaultBuilder(BuildContext context) {  return SnippetFrame(    maxWidth: 360,    child: LiqDemo<String>(      initial: '',      builder:          (v, set) =>          LiqOtpInput(value: v, onChanged: set),    ),  );}

Four Digit

// ignore_for_file: file_names // hyphenated name required by snippet manifest conventionimport 'package:docs_snippets/src/demo.dart';import 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/liqkit_ui.dart';​/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget otpFourDigitBuilder(BuildContext context) {  return SnippetFrame(    maxWidth: 360,    child: LiqDemo<String>(      initial: '',      builder:          (v, set) =>          LiqOtpInput(value: v, onChanged: set, length: 4),    ),  );}

Obscure

import 'package:docs_snippets/src/demo.dart';import 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/liqkit_ui.dart';​/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget otpObscureBuilder(BuildContext context) {  return SnippetFrame(    maxWidth: 360,    child: LiqDemo<String>(      initial: '',      builder:          (v, set) =>          LiqOtpInput(value: v, onChanged: set, obscure: true),    ),  );}