class

Shared::Field(T)

Inherits Lucky::CatchUnpermittedAttribute < BaseComponent < Lucky::BaseComponent < Lucky::HTMLBuilder < Lucky::SelectHelpers < Lucky::LabelHelpers < Lucky::InputHelpers < 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, op.name

Call any of the input methods on the block

mount Shared::Field, op.email, &.email_input

Add other HTML attributes

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

Pass an explicit label name

mount Shared::Field, 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, 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, op.name

Call any of the input methods on the block

mount Shared::Field, op.email, &.email_input

Add other HTML attributes

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

Pass an explicit label name

mount Shared::Field, 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, 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, op.name

Call any of the input methods on the block

mount Shared::Field, op.email, &.email_input

Add other HTML attributes

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

Pass an explicit label name

mount Shared::Field, 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, 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