class

Shared::Field(T)

Inherits BaseComponent / Lucky::BaseComponent / Lucky::HTMLBuilder / Lucky::SvgInliner / Lucky::LiveReloadTag / Lucky::TagDefaults / Lucky::RenderIfDefined / Lucky::HelpfulParagraphError / Lucky::MountComponent / Lucky::ForgeryProtectionHelpers / Lucky::TimeHelpers / Lucky::UrlHelpers / Lucky::HTMLTextHelpers / Lucky::TextHelpers / Lucky::NumberToCurrency / Lucky::AssetHelpers / Lucky::Assignable / Lucky::SpecialtyTags / Lucky::FormHelpers / Habitat::SettingsHelpers / Habitat::TempConfig / Lucky::LinkHelpers / Lucky::CustomTags / Lucky::CheckTagContent / Lucky::BaseTags / Lucky::CheckTagContent / Reference / Object

This component is used to make it easier to render the same fields styles throughout your app.

Extensive documentation at: https://luckyframework.org/guides/frontend/html-forms#shared-components

Basic usage:

Renders a text input by default and will guess the label name "Name"

mount Shared::Field.new(op.name)

Call any of the input methods on the block

mount Shared::Field.new(op.email), &.email_input

Add other HTML attributes

mount Shared::Field.new(op.email), &.email_input(autofocus: "true")

Pass an explicit label name

mount Shared::Field.new(op.username, "Your username")

Customization

You can customize this component so that fields render like you expect. For example, you might wrap it in a div with a "field-wrapper" class.

div class: "field-wrapper" label_for field yield field mount Shared::FieldErrors.new(field) end

You may also want to have more components if your fields look different in different parts of your app, e.g. CompactField or InlineTextField

Constants

ASSIGNS = [attribute : Avram::PermittedAttribute(T), label_text : String | ::Nil] of Nil

This component is used to make it easier to render the same fields styles throughout your app.

Extensive documentation at: https://luckyframework.org/guides/frontend/html-forms#shared-components

Basic usage:

Renders a text input by default and will guess the label name "Name"

mount Shared::Field.new(op.name)

Call any of the input methods on the block

mount Shared::Field.new(op.email), &.email_input

Add other HTML attributes

mount Shared::Field.new(op.email), &.email_input(autofocus: "true")

Pass an explicit label name

mount Shared::Field.new(op.username, "Your username")

Customization

You can customize this component so that fields render like you expect. For example, you might wrap it in a div with a "field-wrapper" class.

div class: "field-wrapper" label_for field yield field mount Shared::FieldErrors.new(field) end

You may also want to have more components if your fields look different in different parts of your app, e.g. CompactField or InlineTextField

Constructors

new(attribute : Avram::PermittedAttribute(T), label_text : String | Nil = nil, **unused_exposures)

This component is used to make it easier to render the same fields styles throughout your app.

Extensive documentation at: https://luckyframework.org/guides/frontend/html-forms#shared-components

Basic usage:

Renders a text input by default and will guess the label name "Name"

mount Shared::Field.new(op.name)

Call any of the input methods on the block

mount Shared::Field.new(op.email), &.email_input

Add other HTML attributes

mount Shared::Field.new(op.email), &.email_input(autofocus: "true")

Pass an explicit label name

mount Shared::Field.new(op.username, "Your username")

Customization

You can customize this component so that fields render like you expect. For example, you might wrap it in a div with a "field-wrapper" class.

div class: "field-wrapper" label_for field yield field mount Shared::FieldErrors.new(field) end

You may also want to have more components if your fields look different in different parts of your app, e.g. CompactField or InlineTextField

Class methods

file_location

Returns the relative file location to the project root. e.g. src/components/my_component.cr

Source

Instance methods

attribute

label_text

render

Source

render

Use a text_input by default

Source