A utility to set the style of focused input elements globally.

You can use the focusInput utility to ensure that all input components have the same :focus style. This approach lets you style the focus state once, rather than having to do it for each component individually. Read more about this pseudo-class here.

Components using this utility:

  • DatePicker
  • Input
  • Select
  • SelectNative
  • Textarea


  1. 1

    Add the following code to your utils.ts file.

    // Tremor Raw focusInput [v0.0.1]
    export const focusInput = [  // base  "focus:ring-2",  // ring color  "focus:ring-blue-200 focus:dark:ring-blue-700/30",  // border color  "focus:border-blue-500 focus:dark:border-blue-700",]