Text Field

New version v0.0.1 🚀

Text input component for Phoenix and Phoenix LiveView with floating labels, supporting plain text entry and versatile form integration.

Installation:

mix mishka.ui.gen.component text_field

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless

Certain props are shared across all form-related components, and you can find them in the form wrapper.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the gallery, allowing for flexible design changes.

Form Text component

The text_field component is an input field of type text, designed for collecting basic text input from users. It’s versatile and widely used in forms for inputting single-line text, such as names, addresses, or any general information. The text_field can be customized with attributes like placeholder text, label, and additional styling to fit various use cases, making it an essential component for user data entry in forms and applications.

Mishka chelekom text field

Text field

Mishka chelekom text field

Text field

<.text_field
  id="form-example-142"
  name="form-example-142"
  value=""
  space="small"
  description="Mishka chelekom text field"
  label="Text field"
  placeholder="Text field"
  variant="default"
/>

Text Field Component Props

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction.
class	string	No	Custom CSS class for additional styling.
color	string	No	Determines color theme (default is "light").
border	string	No	Determines border style (default is "extra_small").
rounded	string	No	Determines the border radius (default is "small").
variant	string	No	Determines the style (default is "outline").
description	string	No	Determines a short description.
space	string	No	Space between items (default is "medium").
size	string	No	Determines the overall size (default is "extra_large").
ring	boolean	No	Determines a ring border on focused input (default is true).
floating	string	No	Controls floating label behavior (default is "none").
error_icon	string	No	Icon to be displayed alongside error messages.
label	string	No	Specifies text for the label.
errors	list	No	List of error messages to be displayed.
name	any	No	Name of the input.
value	any	No	Value of the input.
field	Phoenix.HTML.FormField	No	A form field struct retrieved from the form.
start_section	slot	No	Renders content at the start of the element.
end_section	slot	No	Renders content at the end of the element.

TextField CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	outline - default - shadow - unbordered - transparent	Yes
`--color`	string	white - primary - secondary - dark - success - warning - danger - info - light - misc - dawn - silver	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large - full	Yes
`--space`	string	extra_small - small - medium - large - extra_large	Yes
`--only`	string	text_field	Yes
`--module`	string	Something	NO