Sign in
AuthShell-composed credential entry, validation, submission, success, and mobile pressure.
Sign-in screen
AuthShell constrains one model-backed Card while the composition retains credentials, recovery navigation, Turbo replacement, and submission pressure.
Loading
Every mutable control and the submitting action are disabled.
Viewport
Ruby
test/dummy/app/components/gallery/compositions/sign_in_page.rbrender NitroKit::AuthShell.new(
id: "gallery-sign-in-shell",
aria: {
label: "Nitro account sign in",
busy: state == "loading" ? "true" : nil
}.compact,
data: {
gallery: "composition-surface",
gallery_composition: "sign-in",
gallery_mobile: state == "mobile" ? "true" : nil
}.compact
) do
turbo_frame_tag("gallery-sign-in-frame") { render_screen }
end