Location	Effort to convert into PL	Existing PL component	Form Layout	Alignment	Label location	Tooltips	Placeholder text	Validation	Location of validation	Advance input fields	Semantic HTML	Links	Action buttons	Submit	Screenshots
Discussion board home, search box: https://courses.stage.edx.org/courses/course-v1:edx+bj101+2016/discussion/forum/	Already using it.	Yes, search component	Inline, single text field	Left align	Inside, hidden	None	Yes	None	N/A	No	Yes	No	Yes	Updates a results list outside the component. Doesn't update focus or provide feedback search has completed.	Base state: https://i.bjacobel.com/20161205-14ss7.png Focused & filled: https://i.bjacobel.com/20161205-hrr08.png After submitted: https://i.bjacobel.com/20161205-79h02.png
Discussions add/edit post form: https://courses.stage.edx.org/courses/course-v1:edx+bj101+2016/discussion/forum/course/threads/57e18a0081e610058d00000c Used with Inline Discussions as well.	Already using it	Uses UXPL dropdowns and buttons, but not UXPL inputs	Stacked	Left	Labels on left, with longer helptext on right	None	No	Yes - cannot submit with an empty title or body	Top of form	Weird custom radio button toggle thing that displays as buttons (see screenshot) WMD markdown editor input. Provided by 3rd-party vendor. Supports rendering of LaTeX expressions via MathJax with live preview.	Yes, except for help text - I don't think it's "linked" to the input strongly enough. Only some field sets are wrapped in fieldsets	No	Yes - Add/Edit post and Cancel (uses UXPL buttons)	Sends AJAX, form disappears and is replaced with post view	Edit base state: https://i.bjacobel.com/20161205-5tgsw.png Add base state: https://i.bjacobel.com/20161205-8u5ud.png Radio button toggler thingy: https://i.bjacobel.com/20161205-kcxth.png Validation message: https://i.bjacobel.com/20161205-fwvmo.png Checkboxes on bottom: https://i.bjacobel.com/20161205-oi72n.png
Discussions "Add a response" / "Add comment". Used with Inline Discussions as well.										WMD editor (see above)					Response: https://i.bjacobel.com/20161205-xgo9b.png Comment: https://i.bjacobel.com/20161205-zne38.png
Discussions thread listing filter on discussions home	Page uses it, but it's not a UXPL input	No	Inline single field	Left	Hidden (sr-only) label, placeholder and icon (right)	No	Yes	None	N/A	No	pretty close	No	No	Updates the listbox below on keydown	https://i.bjacobel.com/20161205-kn8h5.png
Create new program page: https://studio.stage.edx.org/program/new	Already using it	Yes! Fields and buttons are already UXPL components	Stacked	Left	Above	No	No	Yes, using UXPL form validations - although when there is a JS error submitting, nothing is displayed	below field	No	Yes	No	Yes, Create and cancel	Create takes you to the edit/detail page for the new program, cancel closes the form and returns you to Studio home	Base state: https://i.bjacobel.com/20161205-f1dju.png Validations displayed: https://i.bjacobel.com/20161205-nyn12.png
Edit program page: https://studio.stage.edx.org/program/111	UXPL page, but not using UXPL inputs	Some inputs are, some aren't	Stacked	Left	Some are on top, some don't have them	Only the non-UXPL inputs have them	No	Top three inputs don't have them.	Below the field, where it exists	No	No, for the three really weird inputs on top	No	Yes, for the save on the add course part of the form	Clicking the pencil icon brings a field out of nowhere. Clicking away from the field (apparently) saves your input - with no validation - and removes the input, making your input look like a <span>. It's really messed up.	Base state: https://i.bjacobel.com/20161205-tp0m2.png Fields active: https://i.bjacobel.com/20161205-tflq6.png Tooltips: https://i.bjacobel.com/20161205-az1oh.png Add a course to the program: https://i.bjacobel.com/20161205-3w8zz.png Add course validations: https://i.bjacobel.com/20161205-57nht.png
Create Library form: can't be linked by URL, but click "Add Library" on Studio home	???	Nope	Stacked	Left	Above, with longer help text below	No	Yes	Yes	Below help text	No	"tip"/help fields and validation errors are not semantic	No	Create and cancel (create is disabled while validation errors exist, which is a nice touch)	Cancel hides the form (no page transition), create takes you to a detail page for the new library	Base state: https://i.bjacobel.com/20161205-7h8vi.png (validation triggered as I took screenshot) Filled: https://i.bjacobel.com/20161205-shlxa.png

Browser not supported