Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

TextInput.mdx 2.2 KiB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. ---
  2. name: TextInput
  3. route: /components/textinput
  4. menu: Components
  5. ---
  6. import { Playground, Props, Link } from 'docz'
  7. import TextInput from './TextInput'
  8. # TextInput
  9. Component for inputting textual values.
  10. <Playground>
  11. <TextInput label="Username" placeholder="johndoe" hint="the name you use to log in" />
  12. </Playground>
  13. ## Props
  14. <Props of={TextInput} />
  15. ## Usage Notes
  16. The component will behave as `block`, i.e. it takes the remaining of the horizontal space.
  17. To use the component together with layouts, see the following examples.
  18. ### Inline
  19. The components are surrounded by `inline-block` elements. These surrounding elements have specified widths, which could
  20. act as guide to the user on how long the expected input values are.
  21. <Playground>
  22. <form>
  23. I am <span style={{ display: 'inline-block', width: '16rem', }}><TextInput label="Full name" hint="given and family name" /></span> and I live in <span style={{ display: 'inline-block', width: '24rem', }}><TextInput label="Address" hint="city, state and country" /></span>.
  24. </form>
  25. </Playground>
  26. ### Grid
  27. It is advisable to put surrounding elements instead of the `TextInput` components themselves as children of the
  28. element specified as `grid`. This is to be able to add complementing content to the components, if for example there are
  29. some content that is best displayed outside the component instead of putting in the `hint` prop.
  30. <Playground>
  31. <form
  32. style={{ display: 'grid', gridTemplateColumns: '4fr 4fr 5fr', gap: '1rem', }}
  33. >
  34. <div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
  35. <TextInput label="Address line 1" hint="unit/house number, building" />
  36. </div>
  37. <div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
  38. <TextInput label="Address line 2" hint="street, area" />
  39. </div>
  40. <div>
  41. <TextInput size="large" label="City/Town" />
  42. </div>
  43. <div>
  44. <TextInput size="large" label="State/Province" />
  45. </div>
  46. <div>
  47. <TextInput size="large" label="Country" hint="abbreviations are accepted" />
  48. <small>
  49. Consult the <a href="#">fees table</a> for shipping fee details.
  50. </small>
  51. </div>
  52. </form>
  53. </Playground>
  54. ## See Also
  55. - <Link to="../select">Select</Link> for a graphically-similar component suitable for selecting more values.