DAOhaus v2
Developers
legos
Field Lego

Field Legos are used to define a field to be used within a Form Lego.

There are many premade Field Legos available for use in /src/data/fields.js (opens in a new tab)

See Field Legos in action in the Mint a Million Tutorial

Field Lego Parameters

ParameterData TypeDescription
typeSTRINGThis value tells the factory component which UI element to render. This includes generic and standardized inputs.
labelSTRINGThis value tells the factory component what to render as the input's label.
nameSTRINGThis is the 'key' or 'id' for the data enterred into the input. This value:
  • Must be different than any other name values on the form.
  • Stores data in the values object under the key entered as name.
  • Which means that this is the reference to the data the user provides in the input.
  • It's used inside the TX data to get form data into the transaction.
  • It's what the Form.required checks for.
  • Can be referenced throughout the transaction process by the name entered here.
    • htmlForSTRINGLinks the input's name with its label for accessibility purposes. If falsy, the htmlFor will default to the input's name.
    placeholderSTRINGPlaceholder text for the input.
    infoSTRING
  • Specifies tool tip text
  • If a field lego receives a field.info value, the component's wrapper will display an info icon, with a hoverable tooltip that displays the string value enterred in the info field.
  • If field.info is falsy or not included in the lego, an info tooltip does not render.
    • expectTypeSTRING
  • This tells the form validation what type of string this input is expecting. Because all incoming data from inputs are strings, expectType does not check for JS types, instead it looks for different types of strings.
  • For example, if we had an input that was only expecting numbers, both integers and numbers with decimals, Field.expectType would equal number. The validation would then look at the string the input receives and check if all the characters in the string are all numbers.
  • It will return errors to the form if it does not receive the type of string that it is expecting. Like Form.required, the errors will be distributed throughout the form and displayed at the bottom of the inputs that have invalid information.
    • selectNameSTRINGThe secondary name of the input select component that is stored in the values object.
    helperTextSTRINGThis is the text underneath the field if you want to hard code instead of dealing with it inside of the component.
    Contract LegoForm Lego