[shadcn/ui] Inputコンポーネントのフォーカス時の枠を非表示にする方法

shadcn/uiのInputコンポーネントのフォーカス時の枠を非表示にする方法について説明します。

方法1: Inputコンポーネントに渡すクラスで対応

classNameの値に "focus-visible:ring-transparent" を付け加えます。

page.tsx

<Input className='focus-visible:ring-transparent' />

方法2: Inputコンポーネントを編集

classNameの値に "focus-visible:ring-transparent" を付け加え、 "focus-visible:ring-ring" を削除します。

components\ui\input.tsx

<input
    type={type}
    className={cn(
        // "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:ring-transparent",
    )}
    // ...
/>