Formfield flyout

A flyout component where the trigger can only be of the component type formfield. If the user clicks inside the input field, the formfield displays. If the user clicks outside of the formfield or loses focus it is closed again.

Align left

px 

			
				<div class="m-formfield-flyout js-formfield-flyout m-formfield-flyout--align-left">
	<div class="a-formfield  m-formfield-flyout__trigger  ">
		<div class="a-formfield__wrapper    ">
			<input class="a-formfield__input" type="text" name="" id="" placeholder="A placeholder" value="This field has a value" />
		</div>
	</div>
	<div class="m-formfield-flyout__content">
		<div class="m-formfield-flyout__content-container">
			This is the content of the flyout
		</div>
	</div>
</div>

Align right

px 

			
				<div class="m-formfield-flyout js-formfield-flyout m-formfield-flyout--align-right">
	<div class="a-formfield  m-formfield-flyout__trigger  ">
		<div class="a-formfield__wrapper    ">
			<input class="a-formfield__input" type="text" name="" id="" placeholder="A placeholder" value="This field has a value" />
		</div>
	</div>
	<div class="m-formfield-flyout__content">
		<div class="m-formfield-flyout__content-container">
			This is the content of the flyout
		</div>
	</div>
</div>

Default

px 

			
				<div class="m-formfield-flyout js-formfield-flyout ">
	<div class="a-formfield  m-formfield-flyout__trigger  ">
		<div class="a-formfield__wrapper    ">
			<input class="a-formfield__input" type="text" name="" id="" placeholder="A placeholder" value="This field has a value" />
		</div>
	</div>
	<div class="m-formfield-flyout__content">
		<div class="m-formfield-flyout__content-container">
			This is the content of the flyout
		</div>
	</div>
</div>

States

px 

			
				<div class="m-formfield-flyout js-formfield-flyout is-error">
	<div class="a-formfield  m-formfield-flyout__trigger is-error ">
		<div class="a-formfield__wrapper    ">
			<input class="a-formfield__input" type="text" name="" id="" placeholder="A placeholder" value="This field has a value" />
		</div>
	</div>
	<div class="m-formfield-flyout__content">
		<p class="m-formfield-flyout__message">Sommige karakters zijn niet toegestaan</p>
	</div>
</div>

Documentation

Modifiers

  • m-formfield-flyout--align-left

    Align the content of a formfield-flyout more to the left side in order for the content to stay in viewport.

  • m-formfield-flyout--align-right

    Align the content of a formfield-flyout more to the right side in order for the content to stay in viewport.

States

  • is-error

    Indicate that the content placed within the input trigger is false. The color of the message changes to a more red like color.

  • is-warning

    Indicate that the content placed within the input trigger is average. The color of the message changes to a more orange like color.

  • is-succes

    Indicate that the content placed within the input trigger is correct. The color of the message changes to a more green like color.