Skip to content
QuickGUI

OtpField

A bounded one-time-code editor made from individually styled input cells.

Loading interactive demo…

#Import

Import OtpField from quickgui.

use quickgui::*;

#Usage

let field = OtpField::new("code");
field.root().flex_row().gap(8.0)

#Anatomy

  • OtpField::root
  • OtpField::input
  • OtpField::separator

#API reference

Expand an entry for its description and complete signature. A dash means no declaration default is documented.

OtpField

View source
pub fn new(root_id: impl Into<ElementId>) -> Self
auto_submitpub fn auto_submit(mut self, form: impl Into<ElementId>) -> Self—

Submit the named form as soon as the final slot is filled. QuickGUI routes the request through [`crate::EventContext::submit_form`], so the form is validated exactly as a Return press or a submit button would validate it. Pass the id of the nearest mounted [`crate::form`] ancestor.

pub fn auto_submit(mut self, form: impl Into<ElementId>) -> Self
View source
root_idpub const fn root_id(self) -> ElementId—

Configures root id for this part.

pub const fn root_id(self) -> ElementId
View source
submitted_formpub const fn submitted_form(self) -> Option<ElementId>—

Configures submitted form for this part.

pub const fn submitted_form(self) -> Option<ElementId>
View source
input_idpub fn input_id(self, index: usize) -> ElementId—

Configures input id for this part.

pub fn input_id(self, index: usize) -> ElementId
View source
separator_idpub fn separator_id(self, index: usize) -> ElementId—

Configures separator id for this part.

pub fn separator_id(self, index: usize) -> ElementId
View source

OtpField::root_with

View source
pub fn root_with(self, state: &OtpFieldState, root: Element) -> Element

Decorate an application-owned root without adding layout or appearance. The root is the group that names the whole code and carries its validity, so assistive technology announces one field rather than a row of unrelated one-character inputs.

OtpField::root

View source
pub fn root(self, state: &OtpFieldState) -> Element

Create the unstyled root part. Use [`Self::root_with`] to supply an existing element.

OtpField::input_with

View source
pub fn input_with(self, state: &OtpFieldState, index: usize, input: Element) -> Element

Decorate one application-owned slot input without adding appearance. Pass a [`crate::text_input`] built from [`OtpFieldState::slot_text`]. QuickGUI adds the stable identity, the slot's position in the code, the masked presentation, and the required and disabled policy. Use [`Self::slot_with`] to attach the behavior as well.

OtpField::input

View source
pub fn input(self, state: &OtpFieldState, index: usize) -> Element

Create the unstyled input part. Use [`Self::input_with`] to supply an existing element.

OtpField::separator_with

View source
pub fn separator_with(self, index: usize, separator: Element) -> Element

Decorate an application-owned separator between two slots. The separator is decorative: it carries a stable identity and the Separator role, and is hidden from assistive technology so it never interrupts the announced code.

OtpField::separator

View source
pub fn separator(self, index: usize) -> Element

Create the unstyled separator part. Use [`Self::separator_with`] to supply an existing element.

OtpField::slot_with

View source
pub fn slot_with<V: 'static, Change, Complete>( self, cx: &mut ViewContext<'_, V>, state: &OtpFieldState, index: usize, input: Element, access: fn(&mut V) -> &mut OtpFieldState, on_value_change: Change, on_complete: Complete, ) -> Element where Change: Fn(&mut V, &str, &mut EventContext) + Clone + 'static, Complete: Fn(&mut V, &str, &mut EventContext) + Clone + 'static,

Decorate one slot and attach its complete behavior. This registers the slot's input listener and its typed keyboard actions. Install [`otp_field_key_bindings`] once on the application keymap. `on_value_change` runs for every change with the whole code; `on_complete` runs only on the transition into a full code, and is followed by [`Self::auto_submit`] when one is declared.

OtpField::slot

View source
pub fn slot<V: 'static, Change, Complete>( self, cx: &mut ViewContext<'_, V>, state: &OtpFieldState, index: usize, access: fn(&mut V) -> &mut OtpFieldState, on_value_change: Change, on_complete: Complete, ) -> Element where Change: Fn(&mut V, &str, &mut EventContext) + Clone + 'static, Complete: Fn(&mut V, &str, &mut EventContext) + Clone + 'static,

Create the unstyled slot part. Use [`Self::slot_with`] to supply an existing element.

OtpField::slot_with_accessor

View source
pub fn slot_with_accessor<V: 'static, Change, Complete>( self, cx: &mut ViewContext<'_, V>, state: &OtpFieldState, index: usize, input: Element, access: StateAccessor<V, OtpFieldState>, on_value_change: Change, on_complete: Complete, ) -> Element where Change: Fn(&mut V, &str, &mut EventContext) + Clone + 'static, Complete: Fn(&mut V, &str, &mut EventContext) + Clone + 'static,

Decorate one slot and attach its behavior against a per-instance state accessor.